why some of the font-awesome icons does not show

Question

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

Answer 1

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.

Answer 2

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">

Answer 3

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">