CODEWITHSUNDEEP
cssnode.jslessnpmfont-awesome
Govan
Govan

Reputation: 7781

How to use font-awesome icons from node-modules

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?

Upvotes: 125

Views: 166105

Answers (11)

Ken
Ken

Reputation: 369

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

Upvotes: 18

delmarr
delmarr

Reputation: 41

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

Upvotes: 0

Con Antonakos
Con Antonakos

Reputation: 1791

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.

Upvotes: 4

pawelglow
pawelglow

Reputation: 708

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)
    }

Upvotes: 13

alvinsandwich
alvinsandwich

Reputation: 51

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!

Upvotes: 5

jrook
jrook

Reputation: 3519

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

Upvotes: 3

wattry
wattry

Reputation: 994

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.

Upvotes: 2

Kimprosh
Kimprosh

Reputation: 301

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

Upvotes: 9

Kevin Carmody
Kevin Carmody

Reputation: 2319

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'))
})

Upvotes: 114

Wilfred Hughes
Wilfred Hughes

Reputation: 31161

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

Upvotes: 14

Andreas Frische
Andreas Frische

Reputation: 9891

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

Upvotes: 59

Related Questions