set up font awesome 5 in angular-cli 8 for angular 7

Question

I want to add fontawesome 5 to my angular-cli 8.0.2 project (with scss) by copy fonts to project (not link them from internet) and without using any external plugins/projects but in direct way.

So I create project and install fontawesome (free) via npm as follows

ng n --style=scss --routing=true myproject
cd myproject
npm install --save-dev @fortawesome/fontawesome-free

I modify files:

• In angular.json in key projects.myproject.architect.build.options.styles I add following value to array

  "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"

• In styles.scss I add line:

  @import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";

• In src/app/app.component.html after Wellcome text I add

  <i class="fas fa-sync-alt"></i>

Then I run command ng serve and go in browser to http://localhost:4200/ and see this:

I use different instructions from internet but this is best result that I get - but still doesn't work (we see square instead this icon). What to do to fix this problem?

Answer 1

Font Awesome now provides Font Awesome Angular component, but you can also use the following plain approach:

npm install --save @fortawesome/fontawesome-free

Load Font Awesome icons by just simply adding the following into styles.scss:

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

Tested on Angular v8.2.14 and Angular CLI v8.3.19.