How to use font-awesome icons from node-modules
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');
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;
}
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'))
})
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')
.