Best IT Recipes

How to use font-awesome icons from node modules

I installed font icons 4.0.3 with npm install .

If I need to use it from node modules, how do I use it in an html file?

If I need to edit a smaller file, do I need to edit it in node-modules?

+98
css npm less font-awesome
Jan 28 '14 at 13:14
source share
10 answers

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

In your file with a reduced development volume, you can either import the entire font and not use @import "node_modules/font-awesome/less/font-awesome.less" , or look in this file and import only those components that you need. I think this is the minimum for the main 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 are still not going to save this many bytes by doing this. In any case, you will end up, including between 2-3k lines of unminified CSS.

You will also need to serve the fonts themselves from a folder named /fonts/ in your public directory. You can simply 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')) })
+99
Jul 30 '15 at 9:44
source share

You must set the correct font path. eg.

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; }
+47
May 05 '15 at 12:59
source share

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

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

For some build tools, pre-existing font packages exist. For example, webpack has font-awesome-webpack , which allows you to simply require('font-awesome-webpack') .

+11
Sep 19 '16 at 19:52
source share

In my style.css file

 /* 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');
+10
Feb 08 '17 at 17:00
source share

With expressjs, public this is:

 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

+5
Aug 22 '18 at 8:35
source share

You can add it between the <head></head> as follows:

 <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 .

Edit (2017-06-26) - Disclaimer: good tools were not so common during this original answer. With current build tools like webpack or browser, it probably makes no sense to use this answer. I can delete it, but I think it is important to highlight the various options that exist, and the possible domains and not do it.

+4
May 11 '15 at 1:23
source share

Using webpack and scss:

Install font-awesome using npm (using installation instructions at 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 the Dist folder during the WebPack build process. ( https://github.com/webpack-contrib/copy-webpack-plugin )

 npm install copy-webpack-plugin

In the webpack.config.js file, configure copy-webpack-plugin . NOTE. By default, the webpack 4 dist folder is the dist folder, so we copy 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'} ]) ] }

Finally, in your main.scss file , tell fontawesome where the webfonts folder was copied , and import the necessary SCSS files from node_modules .

 $fa-font-path: "/webfonts"; @import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome"; //Include at least one of the below, depending on what icons you want. @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";
+1
02 Oct '18 at 13:29
source share

If you use npm, you can use the Gulp.js build tool to build your Font Awesome packages from SCSS or LESS. This example compiles code from SCSS.

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

  2. Install the plugin named gulp-sass using npm.

  3. Create the main.scss file in your shared 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 gulpfile.js in the directory of your application and copy it.

     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' on the command line and watch the magic.

+1
Nov 06 '18 at 14:33
source share

Since I'm currently studying the js node, I also ran into this problem. All I did was install font-awesome first with npm

 npm install font-awesome --save-dev

after that I set the static folder for 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!

+1
Jul 17 '19 at 5:37
source share

I came across this question that had a similar problem and thought I would share a different solution:

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

First follow 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 steps above, you can insert the icon inside the HTML node with:

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

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

 fontIcon.html
0
Nov 26 '18 at 3:10
source share


More articles:


All Articles