Fontawesome icons not showing in angular project

Question

I have installed fontawesome with npm using npm install --save font-awesome

Then I added the css to my angular.json like this:

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/font-awesome/css/font-awesome.min.css",
          "src/styles.css"
        ],

Then I added this to my html file:

<button type="button" class="btn btn-outline-primary">
    <i class="fa fa-arrow-left"></i>
  </button>

On my webpage it's showing an empty button, what am I doing wrong?

Does this answer your question? [How to add font-awesome to Angular 2 + CLI project](https://stackoverflow.com/questions/38796541/how-to-add-font-awesome-to-angular-2-cli-project) — Dmitry Grinko, Nov 25 '20 at 17:30

abolfazl_mehdi · Accepted Answer · 2020-11-25T17:24:08.250

2

    You can give the address in the styles.scss instead of the address in the package
    this way should work

@import "~font-awesome/css/font-awesome.min.css";

edited Nov 25 '20 at 17:24

answered Nov 25 '20 at 17:15

abolfazl_mehdi

179
2
12

Where do I put this import? – matsgemmeke Nov 25 '20 at 17:21
styles.scss in root project – abolfazl_mehdi Nov 25 '20 at 17:23

score 1 · Answer 2 · answered Aug 16 '22 at 16:04

If you want to upgrade to the Angular form of FontAwesome

This can be resolved by:

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free--svg-icons
npm install --save @fortawesome/angular-fontawesome

check to make sure you have the right version of angular-fontawesome for your angular version.

add/edit the following files:

angular.module.ts

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

angular.component.ts

import {FaIconLibrary, FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {far} from '@fortawesome/free-regular-svg-icons';
import {fas} from '@fortawesome/free-solid-svg-icons';

constructor(
   library: FaIconLibrary,
) {
  library.addIconPacks(fas, far);
}

edit all icon tags to

<fa-icon [icon]="['fas', 'icon-name']" >

score 0 · Answer 3 · answered Nov 25 '20 at 17:28

0

The problem occurs because of the font file is missing. So you need a way to include your font file in your css.

In your styles.scss file add: just check the relative path from your node_modules folder.

$fa-font-path : "~@fortawesome/fontawesome-free/webfonts";
@import '../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';

answered Nov 25 '20 at 17:28

illusion

1,272
11
22

1

Be careful. The command "npm i font-awesome" install the version 4.7 of font-awesome, whereas the relative path of your import is looking for the folder of the new font-awesome 5. So I bet it will not work. The correct path is: --> node_modules/font-awesome/css/font-awesome.min.css OR --> node_modules/font-awesome/css/font-awesome.css – Santironhacker Nov 25 '20 at 17:35
Ohh.. Okay... That's why I said to check the relative path of the directories... So this method doesn't work with font-awesome4? – illusion Nov 25 '20 at 18:18

score 0 · Answer 4 · answered Aug 19 '23 at 18:49

The proper step is:

within the project folder: npm install font-awesome (no need to --save if npm greater than 5)
go to angular.json, add this line in "styles": "./node_modules/font-awesome/css/font-awesome.css"
Restart the server (control-C and ng serve again) to see the effect.
if not work, make sure you see the right code for the icon code in official font-awesome website.

note: some version of angular, need to be: ../node_modules/font-awesome/css/font-awesome.css

Fontawesome icons not showing in angular project

4 Answers4

@import "~font-awesome/css/font-awesome.min.css";

Linked