I have recently tried adding an icon from Font Awesome 5 to a UWP project I'm working on. After failing to get the icon I want to show in the app, I tried simplifying things by getting the icon to show in a simple test app, still with no success. All I did to create the test app was:
In Visual Studio, create a new Windows Universal Blank App.
Added the Font Awesome OTF font file.
Assets
Fonts
Font Awesome 5 Free-Solid-900.otf
Modified MainPage.xaml (following instructions provided by Microsoft) like so:
<Grid>
<FontIcon FontFamily="Assets/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" FontWeight="Black" Glyph="" />
</Grid>
When I run the test app, all I see where the icon should be is a square box. According to the icon's page, the solid version I'm trying to use is in the free version of the font and I have correctly set the font weight to match the configuration of the font family.
Other things I've tried:
Different paths for the Font Family:
Font Awesome 5 Free Solid
/Assets/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid
ms-appx:///Assets/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid
Different minimum version on the UWP project configuration.
Different version of Visual Studio. I am using Visual Studio 2017 for my (real) app because it has certain legacy requirements. Couldn't get this font thing to work in Visual Studio 2019 either.
Different font character. I tried the alternate accessibility symbol provided by Font Awesome which, according to its information page, is in the Font Awesome 5 Brands-Regular-400.otf font file. And yes, for this case I did reset the font weight to Normal (400).
A different control. Tried using a TextBlock instead of FontIcon with same settings (Font Family, Font Weight, Text instead of Glyph, etc.)
Nothing has worked; I have never seen any of the Font Awesome icons I've tried to use appear in my app, every time showing the square box. Is there anything else I haven't tried?
You may be using the wrong font name.
Font Awesome 5 Free-Solid-900.otf Its real font name is not Font Awesome 5 Free Solid, but Font Awesome 5 Free, please use the following code：
FontFamily="/Assets/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free"
In addition, please make sure your font file's Build Action (right-click the file, choose Properties) is Content, it can guarantee that your font file will be added into the package correctly.
Best regards.
Related
How can I use a custom font on Notepad++?
For example: I have an HTML document with couple of P elements and I want each of them to have a different font family.
I know I can accomplish this with CSS, but I prefer to experiment with Notepad++.
What I tried so far:
I selected the text in the P tag I want to change.
I went to: Settings > Style configurator > Language – HTML > Style – Singlestring > Font- webdings (for example).
This seems to change to UI font if I’m not mistaken.
It doesn't change the text I selected in the P tag.
Assuming you're trying to say that you want to change the fonts on your webpage in different divs I don't think it can be accomplished without CSS.
This is because notepad++ documents are only .txt and only store the raw text data.
If you're able to change the UI font on the webpage using notepad then I'm assuming it is actually changing CSS.
Don't be afraid to use CSS, it has awesome capabilities. CSS doesn't have to be in a different document external to your index.html it can be inline:
<div style="font-family: 'Roboto', sans-serif;"> Enter Some Text </div>
If you want information on when to find and how to use different fonts try the Google Fonts API
I have tried right clicking and inspecting element on the navigation bar on the top right of this web page:
http://www.southwest-heart.com/
I want to find out what font they are using where it says "Launch", "Heart" etc..
The only font family i can find is this one:
font-family: SouthwestSans-Regular,Arial,sans-serif;
How would i go about obtaining the font they are using?
Thanks.
you can directly get this font from this website
Your font will be downloaded by your browser after clicking this link
I always use google chrome's WhatFont(plugin) to scanner and know the font information. I think you should try it, or look for a similar plugin for your browser.
See this-
http://fontsinuse.com/uses/319/southwest-airlines
and this
http://www.monotype.com/resources/case-studies/type-with-heart-for-southwest-airlines/
It's a custom font so you may not be able to get it but maybe you can find something similar...
There is another font-family on class:
.nav_toggle_menu a .nav_label {
font-family: SouthwestSans-Bold,Arial,sans-serif;
}
The font-family that you are searching for is SouthwestSans-Bold
#NAjzero Definitely- you can't use fonts that you do not have a license for!
Looks like only a very slight difference to Tahoma. Playing with Font weight and letter spacing with Tahoma and css would give you near enough the same (in my opinion).
That's my HTML code below
<p><strong>bold 2</strong></p>
But it doesn't display right in my Chrome browser.
You've got a user stylesheet that changes the font. The font you picked doesn't have the correct font weights (700 for bold). Use another font or fetch all the weights of that font
Not sure - why it's not working for you. I would say try writing that code again, save and reload your webpage.
I tried it and it works. See - http://jsbin.com/zasineraci/1/edit?html,output
If not, try using instead.
I'm using font-awesome in my website, and I'm getting the wrong icon for Foursquare brand.
I'm using this html:
<i class="fa fa-foursquare"></i>
And this is the css content, according to fontawesom.css:
.fa-foursquare:before{content:"\f180"}
which is correct, according to the official Font Awesome website.
Everything seems to be ok, but instead of the Foursquare logo, I'm getting this icon:
Any ideas?
That icon appears to be http://iconsetc.com/icon/social-media_foursquare/?style=simple-black.
My guess is that you have a different font-based icon set loaded on your document which has the \f180 character mapped as this icon instead, overriding the Font Awesome fa-foursquare icon.
A simple fix for this would be to:
Ensure your icon is using the 'Font Awesome' font;
Remove your other icon font, or;
Ensure Font Awesome is loaded after your other icon font.
Maybe you are looking into old doc for 3.X version
This is the icon in 4.3 version: http://fortawesome.github.io/Font-Awesome/icon/foursquare/
and this for 3.2: http://fortawesome.github.io/Font-Awesome/3.2.1/icon/foursquare/
Remember that Foursquare is a brand icon: https://playfoursquare.s3.amazonaws.com/press/foursquare-brandguide.pdf
I imported the same color scheme I use in sublime text, but the syntax coloring in sublime does a better job of coloring methods, classes, data types, etc. is it possible to make PyCharm look the same as sublime text 2?
PyCharm
Sublime Text 2
After doing some mix-ups, I found an exact working theme.
Hint: click on images to preview in high resolution.
Follow these steps
Install "Monocai Color Theme" from settings>plugins
Select Darcula theme in "Appearance and Behavior"
Select Monokai color scheme under "Editor>Color Scheme"
Final look
What you want is a good replacement theme such as these here.
/edit:
If you still want to further modify the colours for your syntax you need to go to Preferences -> Editor -> Colors & Fonts.
Once there you can select the language you want and customise the colour and look for different parts of the syntax. You can also save that colour scheme for future use. Further information here.
Here you can find an updated link [Editor's note (2021): the website is dead, so updated doesn't describe it anymore] to sublime text code color themes.
If you also want to add a code map bar like the one on sublime, take a look at the PyCharm plugin CodeGlance.