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
fas
? Don't you meanfa
?fas
.fa
?<i class="fa fa-chart-bar"></i>
. Keep in mind that the icons are updated all the time, and some icons are not available in some versions (which would explain some of the squares). If necessary, I'd recommend using version 5 and using the shim. Also, thecamera-retro
icon is a premium font, use the solid version (fas
) or camera` orcamera-alt
instead :)