How to use font-awesome icons from node-modules

Question

I have installed font-awesome 4.0.3 icons using npm install.

If I need to use it from node-modules how should I use it in html file?

If I need to edit the less file do I need to edit it in node-modules?

Answer 1

Install as npm install font-awesome --save-dev

In your development less file, you can either import the whole font awesome less using @import "node_modules/font-awesome/less/font-awesome.less", or look in that file and import just the components that you need. I think this is the minimum for basic icons:

/* adjust path as needed */
@fa_path: "../node_modules/font-awesome/less";
@import "@{fa_path}/variables.less";
@import "@{fa_path}/mixins.less";
@import "@{fa_path}/path.less";
@import "@{fa_path}/core.less";
@import "@{fa_path}/icons.less";

As a note, you still aren't going to save that many bytes by doing this. Either way, you're going to end up including between 2-3k lines of unminified CSS.

You'll also need to serve the fonts themselves from a folder called/fonts/ in your public directory. You could just copy them there with a simple gulp task, for example:

gulp.task('fonts', function() {
  return gulp.src('node_modules/font-awesome/fonts/*')
    .pipe(gulp.dest('public/fonts'))
})

Answer 2

You have to set the proper font path. e.g.

my-style.scss

$fa-font-path:"../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
  @extend .fa;
  @extend .fa-user;
}

Answer 3

Add the below to your .css stylesheet.

/* You can add global styles to this file, and also import other style files */

@import url('../node_modules/font-awesome/css/font-awesome.min.css');

Answer 4

You will need to copy the files as part of your build process. For example, you can use a npm postinstall script to copy the files to the correct directory:

"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"

For some build tools, there are preexisting font-awesome packages. For example, webpack has font-awesome-webpack which lets you simple require('font-awesome-webpack').

Answer 5

Using webpack and scss:

Install font-awesome using npm (using the setup instructions on https://fontawesome.com/how-to-use)

npm install @fortawesome/fontawesome-free

Next, using the copy-webpack-plugin, copy the webfonts folder from node_modules to your dist folder during your webpack build process. (https://github.com/webpack-contrib/copy-webpack-plugin)

npm install copy-webpack-plugin

In webpack.config.js, configure copy-webpack-plugin. NOTE: The default webpack 4 dist folder is "dist", so we are copying the webfonts folder from node_modules to the dist folder.

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    plugins: [
        new CopyWebpackPlugin([
            { from: './node_modules/@fortawesome/fontawesome-free/webfonts', to: './webfonts'}
        ])
    ]
}

Lastly, in your main.scss file, tell fontawesome where the webfonts folder has been copied to and import the SCSS files you want from node_modules.

$fa-font-path: "/webfonts"; // destination folder in dist
//Adapt the path to be relative to your main.scss file
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

//Include at least one of the below, depending on what icons you want.
//Adapt the path to be relative to your main.scss file
@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"; // if you also want to use `fa v4`  like: `fa fa-address-book-o` 

and apply the following font-family to a desired region(s) in your html document where you want to use the fontawesome icons.

Example:

 body {
      font-family: 'Font Awesome 5 Free'; // if you use fa v5 (regular/solid)
      // font-family: 'Font Awesome 5 Brands'; // if you use fa v5 (brands)
    }

Answer 6

With expressjs, public it:

app.use('/stylesheets/fontawesome', express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/'));

And you can see it at: yourdomain.com/stylesheets/fontawesome/css/all.min.css

Answer 7

You could add it between your <head></head> tag like so:

<head>
  <link href="./node_modules/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>

Or whatever your path to your node_modules is.

Edit (2017-06-26) - Disclaimer: THERE ARE BETTER ANSWERS. PLEASE DO NOT USE THIS METHOD. At the time of this original answer, good tools weren't as prevalent. With current build tools such as webpack or browserify, it probably doesn't make sense to use this answer. I can delete it, but I think it's important to highlight the various options one has and the possible dos and do nots.

Answer 8

Since I'm currently learning node js, I also encountered this problem. All I did was, first of all, install the font-awesome using npm

npm install font-awesome --save-dev

after that, I set a static folder for the css and fonts:

app.use('/fa', express.static(__dirname + '/node_modules/font-awesome/css'));
app.use('/fonts', express.static(__dirname + '/node_modules/font-awesome/fonts'));

and in html:

<link href="/fa/font-awesome.css" rel="stylesheet" type="text/css">

and it works fine!

Answer 9

I came upon this question having a similar problem and thought I would share another solution:

If you are creating a Javascript application, font awesome icons can also be referenced directly through Javascript:

First, do the steps in this guide:

npm install @fortawesome/fontawesome-svg-core

Then inside your javascript:

import { library, icon } from '@fortawesome/fontawesome-svg-core'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel)

const fontIcon= icon({ prefix: 'fas', iconName: 'stroopwafel' })

After the above steps, you can insert the icon inside an HTML node with:

htmlNode.appendChild(fontIcon.node[0]);

You can also access the HTML string representing the icon with:

fontIcon.html

Answer 10

If you're using npm you could use Gulp.js a build tool to build your Font Awesome packages from SCSS or LESS. This example will compile the code from SCSS.

1. Install Gulp.js v4 locally and CLI V2 globally.

2. Install a plugin called gulp-sass using npm.

3. Create a main.scss file in your public folder and use this code:

   $fa-font-path: "../webfonts";
   @import "fontawesome/fontawesome";
   @import "fontawesome/brands";
   @import "fontawesome/regular";
   @import "fontawesome/solid";
   @import "fontawesome/v4-shims";
   

4. Create a gulpfile.js in your app directory and copy this.

   const { src, dest, series, parallel } = require('gulp');
   const sass = require('gulp-sass');
   const fs = require('fs');
   
   function copyFontAwesomeSCSS() {
      return src('node_modules/@fortawesome/fontawesome-free/scss/*.scss')
        .pipe(dest('public/scss/fontawesome'));
   }
   
   function copyFontAwesomeFonts() {
      return src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
        .pipe(dest('public/dist/webfonts'));
    }
   
    function compileSCSS() { 
      return src('./public/scss/theme.scss')
        .pipe(sass()).pipe(dest('public/css'));
    }
   
    // Series completes tasks sequentially and parallel completes them asynchronously
    exports.build = parallel(
      copyFontAwesomeFonts,
      series(copyFontAwesomeSCSS, compileSCSS)
    );
   

5. Run 'gulp build' in your command line and watch the magic.

Answer 11

SASS modules version

Soon, using @import in sass will be depreciated. SASS modules configuration works using @use instead.

@use "../node_modules/font-awesome/scss/font-awesome"  with (
  $fa-font-path: "../icons"
);

.icon-user {
  @extend .fa;
  @extend .fa-user;
}