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?

Answer 1

    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";

Answer 2

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';

Answer 3

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']" >