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?

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

Answer 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