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?

Launcher

I have added the link directly in index.html and its working for me – Mass

Why would u specifically add css file, include npm package to angular and let it handle and include that package in your app. – Jerrilyn

check font color – Kosaka

Font color is ok. @ Wasif Khan how do you mean to include it package in angular. It is a way how css should be included in angular as far as I know. – Launcher

#42107318 – Roadability

Possible duplicate of font awesome with Angular 2 – Roadability

@Launcher I know it's an old post, but did you ever resolve this? I'm facing the same issue and tried all the answers below. None of them helped. – Radiomicrometer

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>

Laid

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. – Launcher

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"> @Launcher – Laid

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

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

Rafa

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

Gulick

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

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. – Epigone

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

Sculptor

Answer 5

link your font-awesome css and js file in your index.html or angular.cli

Index.html

<!-- Custom Fonts -->


 <link href="your node font awesome location" rel="stylesheet" type="text/css">

angular-cli:

"styles": ['your node font awesome location']

Haiti

Check my comment below @Laid answer. – Launcher

check this #38797041 – Haiti

Answer 6

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

Kosaka

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

Answer 7

In case none of the above tips worked, then uninstall the latest one and install the 4th version of fontawesome and you are good to go. https://fontawesome.com/v4.7.0/icon/trash

Shockley

Answer 8

Please try restarting your server by pressing Ctrl+Cand then run the project again using ng serve . This is because changes in angular.json files are reflected only after restarting the server again.

Jota

Answer 9

If nothing works, check that you have imported fontawesome/css/all.css or equivalent in your Angular index.html file.

If you have, let's say you want to bring a new icon fa-circle-xmark to the existing CSS library rather than upgrading the current library.

Add this new icon to the existing CSS file

.fa-circle-xmark:before {
    content: "\f057"; }

I hope this helps someone.

Thanks

Expiratory