CODEWITHSUNDEEP
htmlcssangularfont-awesome
ddd
ddd

Reputation: 5029

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

Upvotes: 21

Views: 78357

Answers (6)

discry
discry

Reputation: 1

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

Upvotes: 0

Kyle Lester
Kyle Lester

Reputation: 1

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

Upvotes: 0

jakobinn
jakobinn

Reputation: 2032

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

Upvotes: 12

S&#233;bastien Gicquel
S&#233;bastien Gicquel

Reputation: 4386

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>

Upvotes: 2

MBaas
MBaas

Reputation: 7530

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.

Upvotes: 19

Sampad
Sampad

Reputation: 39

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

Upvotes: 2

Related Questions