24

I am not finding any documents for what to do next, I installed font-awesome 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?

shA.t
  • 16,580
  • 5
  • 54
  • 111
thatryan
  • 1,551
  • 6
  • 21
  • 39

4 Answers4

19

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";
}
shA.t
  • 16,580
  • 5
  • 54
  • 111
Hamed
  • 565
  • 3
  • 17
10

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/'));
});
Yifan
  • 1,185
  • 12
  • 18
1

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

TarangP
  • 2,711
  • 5
  • 20
  • 41
Antonio Fortunato
  • 19
  • 3
-1

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.

Akyuna Akish
  • 147
  • 1
  • 7