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
Related
I am trying to use Font Awesome with Petite Vue. As it is a lightweight version of Vue with no build step, I cannot use the Font Awesome Vue Component.
I am using a Font Awesome Pro Kit (web fonts to avoid CORS issues) and importing Font Awesome and Petite Vue in a <script> tag.
However, when inside a v-for loop, I cannot get the Font Awesome icon to display.
<i class="fa fa-thin fa-{{ item.icon }}"></i>
It works fine outside the v-for loop, even if still inside a v-scope tag and hard-coding an icon name works too. It also works as expected if not using Petite Vue.
I managed to get this working by using v-effect to dynamically add the icon name class.
<i class="fa fa-thin" v-effect="$el.classList.add('fa-' + item.icon)"></i>
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.
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).
I have a wordpress site and I installed the shortcode plugin.
I am trying to install a button and I put an icon on it.
When I load my site here you can see it under the slider, the button that says photo gallery
http://denverkollel.org/site/
it's on the blue background. You see there is a space , but no icon showing.
I have the font-awesome css on the page. what else might I be missing to make it work?
You are using the older verion of Font-Awesome and that doesn't suppot fa fa-video-camera.
Actually, it doesn't even support fa class.. Initially Font-awesone used to have classes starting with .icon-.
Download a new version and make required changes.
I am trying to embed font awesome icons in select option.
I tried with <i> as well as but both are not working.
If any body has it's solution please guide on the same