Source:  Twitter logo

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.

13 users liked answer #0dislike answer #013
MBaas profile pic
MBaas

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">
11 users liked answer #1dislike answer #111
jakobinn profile pic
jakobinn

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">
2 users liked answer #2dislike answer #22
Sampad profile pic
Sampad

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>
1 users liked answer #3dislike answer #31
Sébastien Gicquel profile pic
Sébastien Gicquel

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";
0 users liked answer #4dislike answer #40
Kyle Lester profile pic
Kyle Lester

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

0 users liked answer #5dislike answer #50
discry profile pic
discry

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).