CODEWITHSUNDEEP
angularfont-awesome
Nils
Nils

Reputation: 469

Why are the font-awesome icons not showing?

I've created an angular project and for beauty reasons i want to use font-awesome icons. I installed it like this:

npm install font-awesome

And then added it to javascript in my angular.json:

"styles": [
  "node_modules/font-awesome/css/font-awesome.css"
]

Already checked, the path is correct (for my setup)

So when i now try to add the "plus" icon for example (which is included in the free version) it just shows like a weird placeholder...

I added the icon like this:

<i class="fas fa-plus-circle"></i>

Hope you guys can help me

Upvotes: 3

Views: 5947

Answers (2)

Hirusha Kumarasinghe
Hirusha Kumarasinghe

Reputation: 3

Change fas to fa

if you have the code like this <i class="fas fa-caret-down"></i> change to this <i class="fa fa-caret-down"></i>

That is occurring because of a version issue.

Upvotes: 0

SparkFountain
SparkFountain

Reputation: 2270

Although the question has been answered already in the comments, here is a short summary:

Font Awesome has several versions, the newest one is 5.15.1 (relying on the GitHub repository). However, in the NPM repository the authors have still published the older version 4.7.0.

The name of the base class for Font Awesome has changed from fa in version 4.x to fas in version 5.x. And because the documentation refers to the newest version, but the NPM package version is older, you must change fas to fa everywhere.

Edit: As I discovered, in Font Awesome 5.x there are also several classes of alternative icon styles, like far or fab. In case of doubt, you should check to which style class each individual icon belongs.

Nevertheless, the newest version of Font Awesome has been published as well at NPM under the package name @fortawesome/fontawesome-free.

Upvotes: 5

Related Questions