How to use font awesome 5 installed via NPM

Question

I am not finding any docs for what to do next, I installed into my project via npm,

$ npm install --save @fortawesome/fontawesome-free-webfonts

But now what? Can anyone point me to how to actually import or use it now? Thank you.

Answer 1

First install it using NPM :

npm install @fortawesome/fontawesome-free --save-dev

Now you have two ways, one way is to embed the absolute URL within your HEAD section or if you working with something like SASS(SCSS), You can import it in your custom.scss file like this :

1- first set an absolute path for webfonts (It has to be set before the fontawesome.scss) :

$fa-font-path: "node_modules/@fortawesome/fontawesome-free/WebFonts" !default;

2- Then import fontawesome.scss :

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

3- Finally import regular, solid or light(pro version) of icon types :

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

After all you can assign font-family to these classes to work :

.fa,.fas,.far,.fal,.fab {
  font-family: "Font Awesome 5 Free";
}

Answer 2

by Gulp

in a SCSS file

@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";

in gulpfile.js

gulp.task('icons', function() {
    return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
        .pipe(gulp.dest(dist+'/assets/webfonts/'));
});

Answer 3

Something like this

// ------------ FONT-AWESOME --------------------//

    $fa-font-path: $fonts_path + 'font-awesome';

@import '../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome';

@import '../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-brands';

@import '../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-regular';

@import '../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid';

Answer 4

To use an npm module on your front-end you'll need to be doing some sort of transpiling with webpack, gulp, or grunt most likely.

Then at the entry point of your application before you write html/jsx/some other html-esque code you'll need to require or import the css file from the font-awesome npm module.

// es6/babel import
import 'font-awesome/css/font-awesome.min.css';

// browserify require statement if not using babel/es6
require('font-awesome/css/font-awesome.min.css');

For example heres a react app I made with webpack/babel and on the entry point file I import the css file from font-awesome: https://github.com/AkyunaAkish/akyuna_akish/blob/master/client/index.js

FYI: I used

npm install --save font-awesome 

Instead of the command you used. You may need to adjust the import/require statement file path to point to the main css file in your font-awesome node_module package if we have slightly different packages.