How to use font-awesome icons from node-modules

css, font-awesome, less, node.js, npm

Solution

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

Problem

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?

Original source