I am using font-awesome with Angular 5 for my UI. Since I am using sass, I added the following line in .angular-cli.json after installing font-awesome
"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/bootstrap/scss/bootstrap.scss",
"styles.scss"
],
Some of the icons works such as
<i class="fa fa-money blue-text"></i>
<i class="fa fa-code blue-text"></i>
However a lot more does not. For example, I wanted to use this bar chart icon with fas fa-chart-bar, but it does not show anything. Things like fas fa-camera-retro only shows as a weird square instead of the actual icon.
Why some of the icons don't work? Is there way to check if these css classes exist in the font-awesome package I installed?
EDIT
Just searched bar chart in node_modules\font-awesome\css\font-awesome.css and only fa-bar-chart exists, not fa-chart-bar. I have the latest font-awesome when I had it installed (4.7.0). Why does their website says fa-chart-bar. Just got it to work with fa fa-bar-chart. Why it is fa and not fas is beyond me
Just searched bar chart in
node_modules\font-awesome\css\font-awesome.css and only fa-bar-chart
exists, not fa-chart-bar. I have the latest font-awesome when I had it
installed (4.7.0). Why does their website says fa-chart-bar. Just got
it to work with fa fa-bar-chart. Why it is fa and not fas is beyond me
That was changed with the release of FA5, because now there are multiple styles for the icons:
fas: FontAwesome solid
far: FontAwesome regular
fab: FontAwesome brands
fal: FontAwesome light
However, FontAwesome5 free has solid only for most icons. For the full experience, you'd have to pay for FontAwesome Pro.
Select any icon in the gallery, to see wich styles are available for it in which release. NB: FA4-icons here.
Worked for me after upgrading to the latest version of Font Awesome:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
You may not use the V5-release of FontAwesome. Just use the latest version of FontAwesome 4, it should work. Use this link
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
I had the same issue. The search page for icons I found with Google was outdated. Make sure you are searching on the last version of the site.
Like you, I found this icon :
<i class="fa fa-line-chart"></I>
It was not working. If you search on the website, you will see it is :
<i class="fas fa-chart-line"></i>
I had to do this one time. I think some mobile devices didn't load one of the fonts:
font-family: "Font Awesome 5 Free", "FontAwesome";
the syntax that worked for me is fas fa-chart-bar https://fontawesome.com/icons/chart-bar?style=solid
this is with the following versions:
bootstrap/4.4.1/css/bootstrap.min.css
font-awesome/4.7.0/css/font-awesome.min.css
Related
When I am using this
<i class="fa fa-user-circle" aria-hidden="true"></i>
icon is appearing but when I am using this
<i class="far fa-user-circle" aria-hidden="true"></i>
its not working.
How can I solve this?
Note: those two icons are different.
Double check you're using the latest version of Font Awesome. If you're still using version 4, you'll need to upgrade to version 5 to use many icons.
E.g the 'far' regular prefix was introduced in version 5.
Details here: https://fontawesome.com/how-to-use/on-the-web/other-topics/troubleshooting
I'm using assan template
to build my laravel project. Everything is fine but the font awesome wont show up. then I'm using this link to fix it:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css">
after that, font awesome showed successfully, but the icons not. Here is the code where i put my icon:
<i class='icon-pictures fa-3x mb20 text-primary'></i>
I'm pretty sure that i've already include all java script and css to my project. but I don't know why this happen. is there something i can do or maybe i missed something?
The method for displaying an icon is that you have to use "fas fa-" following with which icon you want.
In the <i> class add fas fa- and the icon name after the -, This will display the icon.
Why fontawesome icon class is different
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<i class="fa fa-edit"></i>
<i class="fas fa-pencil"></i>
<i class="fab fa-facebook"></i>
The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
Please Refer to this
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Chek out Font Awesome DOCS:
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
This image has all the informations about prefixes so there is really nothing more to add :)
Font Awesome 5.10.0+ has duotone icons with new prefix fad.
I will give answer according to your code only.
Font awesome is an amazing easy to use icon library.
The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
'fa' alone means font awesome. It is no longer used. But I use it with previous link I have my earlier web creations and it works fine.
fas: font awesome solid. It is also free to use.
fab: font awesome brands. Free to use
Rest of the styles everyone above is talking about are: regular (far), light (fal) and duotone (fad) are all pro versions. They are paid.
Further information can be found on: https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use
I hope I have explained with details.
FONT AWESOME 6
In Font Awesome 6 you have new styles and new classes:
More details: https://fontawesome.com/docs/web/setup/upgrade/whats-changed#full-style-names
I'm working on an ASp/net application and i use font-awesome for some icons.
My problem is that icons doesn't appears. I have the last verison of font awesome
here is my code in my nested master:
<li class="active"><asp:HyperLink ID="lnkAccueil" runat="server" NavigateUrl ="~/Views/Accueil.aspx" Title="Accueil"><i class="fa fa-home"></i> </asp:HyperLink></li>
I call my file in my master:
<link href="~/Content/Styles/font-awesome.min.css" rel="stylesheet"/>
and the path is correct.
And here you have the result:
this is the console
I do the same in another project and everything works. I really don't unterstand.
If someone has an answer..
My FontAwesome twitch icon isn't showing. It was completely fine before and now it just randomly disappeared. I haven't changed anything.
Here is my html code:
<div class="text-center center-block" style="margin-top:-40px;"><br/>
<h1>Follow us!</h1>
<i class="fa fa-facebook-square fa-4x"></i>
<i class="fa fa-google-plus-square fa-4x"></i>
<i class="fa fa-twitter-square fa-4x"></i>
<br/>
<i class="fa fa-steam-square fa-4x"></i>
<i class="fa fa-youtube-play fa-4x"></i>
<i class="fa fa-twitch fa-4x"></i>
</div>
I don't understand why it randomly disappeared. I have the latest Font Awesome and have included it in my header like so:
<link rel="stylesheet" href="<?php echo bloginfo('template_directory'); ?>/font-awesome-4.2.0/css/font-awesome.min.css">
All the other icons work completely fine. I can by the way still click on the twitch link but the icon is invisible. I also already tried clearing my cache and another browser.
On the Font Awesome page, in the Brand Icon's section, it says:
Warning!
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names.
I has the same problem and it was an outdated version of Font Awesome who was loading after the updated version
Well, this question is old and probably some of the answers, but for those that are using the new version of Font Awesome like v5 and having the same issues, the current version as at when I am writing this is v5.0.13.
Make sure that you set the CSS to font-weight:900
e.g.
i.fab {font-weight:900}
Please note that the font-weight is not bold but 900.
This worked for me!
For more info visit Troubleshooting Page for Font Awesome