why some of the font-awesome icons does not show

问题

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

回答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.

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

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

回答4:

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>

回答5:

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

来源：https://stackoverflow.com/questions/49483115/why-some-of-the-font-awesome-icons-does-not-show

标签

html

css

angular

font-awesome