18

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

Community
  • 1
  • 1
ddd
  • 4,665
  • 14
  • 69
  • 125
  • `fas`? Don't you mean `fa`? – yaakov Mar 26 '18 at 02:34
  • 3
    @TricksfortheWeb - As of FontAwesome 5, it's `fas`. – Obsidian Age Mar 26 '18 at 02:34
  • OK, try hard reloading and see what happens. Do you have a live URL? – yaakov Mar 26 '18 at 02:35
  • @ObsidianAge I am using font-awesome 4.7.0. So I guess it should be `fa`? – ddd Mar 26 '18 at 02:37
  • 3
    @ddd - Yes; Try with ``. 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**](https://fontawesome.com/how-to-use/upgrading-from-4#v4-shim). Also, the `camera-retro` icon is a premium font, use the solid version (`fas`) or camera` or `camera-alt` instead :) – Obsidian Age Mar 26 '18 at 02:39
  • @ObsidianAge Is version 5 just out? I installed the "latest" font-awesome last week and it was still 4.7.0? – ddd Mar 26 '18 at 02:42
  • @ddd - Version 5 came out on February 7. And yeah, it's a real pain upgrading. I'm still using version 4 myself, but the new icons will only have version 5 support. If you want them, you'll need to upgrade. There is indeed a shim though, so its not all bad. And always double-check which version the icon is released in; you don't want to get caught out :) – Obsidian Age Mar 26 '18 at 02:44
  • @ObsidianAge It appears with `npm`, font-awesome version is not available. – ddd Mar 26 '18 at 03:10

6 Answers6

19

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.

MBaas
  • 7,248
  • 6
  • 44
  • 61
  • His question talks about fa-money and fa-code and your answer talks about fa-bar-chart. – fonZ May 21 '19 at 17:52
  • And the answer applies to these as well! – MBaas May 21 '19 at 22:51
  • I had the same problem with "fa fa-sign-in" which add on the site as "fas fa-sign-in-alt", and same with "fa fa-trash" which is "far fa-trash-alt" on the site.. I don't know why this issue and differences? – Youssef Ali Youssef Jun 06 '19 at 14:55
  • "fa fa-sign-in" is FontAwesome 4-syntax, whereas "fas fa-sign-in" is FA5. My explanation applies to this case as well ;-) – MBaas Jun 06 '19 at 16:03
  • The problem with this answer is that many font awesome icons are not showing up in Firefox with the new naming convention. You should take Jakobinn's solution to make simple "fa" work in Chrome, and therefore also in firefox. – Balazs F. Sep 16 '19 at 09:09
  • I beg to differ - but (a) I don't think that jakobinn's approach will help to old-style "fa fa-money" work with FA5 and (b) I cannot repro issues with "many" FA-Icons in Firefox. – MBaas Sep 16 '19 at 16:13
11

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">
jakobinn
  • 1,832
  • 1
  • 20
  • 20
2

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">
MBaas
  • 7,248
  • 6
  • 44
  • 61
Sampad
  • 39
  • 3
  • some icons are only available in FA5 though - if OP is happy using FA4 then this could be ok to use ^^ (though recommend downloading the css file rather than linking to external site - if external site goes down, so does your site css) – treyBake Mar 26 '18 at 07:56
  • Downgrading is not a solution to the problem. – fonZ May 21 '19 at 17:53
1

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>
Sébastien Gicquel
  • 4,227
  • 7
  • 54
  • 84
0

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";
atymic
  • 3,093
  • 1
  • 13
  • 26
Kyle Lester
  • 1
0

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

discry
  • 1
  • 2