Install font awesome 5 with npm for scss usage

npm install --save-dev @fortawesome/fontawesome
npm install --save-dev @fortawesome/free-regular-svg-icons
npm install --save-dev @fortawesome/free-solid-svg-icons
npm install --save-dev @fortawesome/free-brands-svg-icons

In your app.js or equivalent Javascript file,

import fontawesome from '@fortawesome/fontawesome'
import regular from '@fortawesome/free-regular-svg-icons'
import solid from '@fortawesome/free-solid-svg-icons'
import brands from '@fortawesome/free-brands-svg-icons'

fontawesome.library.add(regular)
fontawesome.library.add(solid)
fontawesome.library.add(brands)

For usage, there are slight changes to the way the class names are being used. Please refer to the icons on Fontawesome site for the "full" class names.

Example

<i class="fas fa-chevron-left"></i>

---

Although the idea of adding all the 3 variants of fonts into the project seems to be a convenient thing, do beware that this will slow performance when building/compiling your project. Thus, it is highly recommended that you add the fonts you need instead of everything.

Add the package;

npm install --save @fortawesome/fontawesome-free

and add the scss files in your app.scss;

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";

then refer the icon in your html files;

<i class="far fa-save"></i>

.

Somehow including fonts in javascript doesn't feel right to me, it's a font and it should belong in css, so here is how to install it using scss:

1. npm install --save @fortawesome/fontawesome-free
2. add @import '~@fortawesome/fontawesome-free/css/all.min.css' in your app.scss file
3. now include app.css to your head and tadaa done