Govan Govan - 2 months ago 28x
CSS Question

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?


Kinda strange this wasn't ever answered. If you want to use the npm version with custom less, then this is probably the most straight forward way.

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/*')

Hope that helps someone.