Font awesome icon does not show

Question

I am working with Angular 4 in dev environment (localhost). I installed font awesome via npm and added:

"./node_modules/font-awesome/css/font-awesome.css",

to my styles scripts.

When I check my icon in browser, everything looks fine:

But my icon does not appear on the page, just an empty square. What am I doing wrong?

Solution 1

its working code :

npm install font-awesome --save

add font-awesome link in .angular-cli.json :

"../node_modules/font-awesome/css/font-awesome.css"

in html file

<i class="fa fa-cog fa-spin"></i>

Solution 2

If you're using the free version. Try this..

First Delete fortawesome registry & authToken

npm config delete "@fortawesome:registry"
npm config delete "//npm.fontawesome.com/:_authToken"

Then Install the package

npm install --save-dev @fortawesome/fontawesome-free

After Installing the package, Add below code in your angular.json file

   ......      
    "styles": [
    ......
    "node_modules/@fortawesome/fontawesome-free/css/all.css"
    ],
    "scripts": [
    ....
    "node_modules/@fortawesome/fontawesome-free/js/all.js"
    ],
    .....
    

Note: There were twice of those blocks (styles/scripts). Add to both

Solution 3

I have tried to include font-awesome CSS and js in angular.json but it doesn't work. The Font-Awesome teams have made a font-awesome component for angular that’s available for all who want to integrate icons in an Angular project. Before installing official an Angular component for font-awesome we have to check compatibility. For Angular 10, we have to install the 0.7.x version of the font-awesome component for angular.

$ npm install @fortawesome/angular-fontawesome@<version>

The icon in font awesome is separated into different packages which allow us to install only the needed icon for our project. This helps to reduce the size of the font-awesome package size.

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save fortawesome/free-regular-svg-icons
$ npm i --save @fortawesome/free-solid-svg-icons

We don't need to include anything on angular.json in style and script. To run and use font-awesome in angular we have to import FontAwesomeModule in app.module.ts file. We can use font-awesome directly in our angular component template.

<fa-icon [icon]="['fas', 'sun']"></fa-icon>
<fa-icon [icon]="['far', 'sun']" ></fa-icon>
<fa-icon [icon]="['fab', 'facebook']"></fa-icon>

For example and configuration of font-awesome in angular. Check this article. https://edupala.com/angular-font-awesome/

Solution 4

In my case I had to restart the server. In cli, where your server is running, press ctrl+c to close the server and after run ng serve --open or ng serve to open the server again.

Solution 5

please add following code to your package.json

 "dependencies": {
     "font-awesome": "^4.7.0", // here I am saying use version 4.7 and above
}

if you are not using angular CLI, In your case cross check font-color I have seen the font is loaded but not appeared

View more solutions

Comments

[Milos]

I needed to gout from angular cli and I am using webpack configuration. Anyway i added it in webpack styles on the same way as i added some other styles which working properly. On my post you can see HTML inspector, everything looks fine, font is there, I do not know why it is not rendered correctly.

[Milos]

Check my comment below @Chandru answer.

[Shanmugapriya D]

check this stackoverflow.com/questions/38796541/…

[Chandru]

if u are using webpack add font-awesome style sheet in index.html : <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css"> @Milos

[Milos]

I tried this. It does not help. It shows font in inspector, but does not render it.

[Milos]

I already have it package.json. Yes, font is loaded but not appeared, I do not understand how it can happen.

[Sergio]

Thanks! I can't understand why this is not documented in the official website ...

[FredM]

I'm completely flabbergasted as to why this is the only way to use font-awesome in an angular project, but it seems to be. The programming model here is terrible and completely unintuitive. I have to add code to AppModule, explicitly add fonts to a library class in a constructor, and reference those icons with directives that don't actually map 1:1 to the import code. E.G. I import faChargingStation but the directive text is 'fas', 'charging-station'. Upvoted your answer because it solved my problem but... yuck.