Webpack 2 and Font-Awesome Icon Importing

Getting these two to play nicely together was initially a frustrating endeavour. Here’s what eventually worked for me after some google-fu.

For this build I will be using webpack@2.4.1 and font-awesome@4.7.0.

Start by installing all your webpack-related NPM devDependencies.

npm install webpack file-loader css-loader sass-loader node-sass 
--save-dev

Now we’ll bring font-awesome into our dependencies 😎

npm install font-awesome --save

After configuring your webpack.config.js to load Sass (tutorial here), we’ll add a loader to read the icons. We’ll also tell it where to look for the fonts.

webpack.config.jsmodule.exports = {
...
module: {
rules: [

// other loaders
...
{
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/', // where the fonts will go
publicPath: '../' // override the default path
}
}]
},
] // -rules
} // -module
} // -module.exports

We’ll set a font-path and import font-awesome within our Sass entry point.

src/scss/main.scss...$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

With everything configured we should have this output:

dist/
css/
main.css
fonts/
fontawesome.webfont.eot
fontawesome.webfont.svg
fontawesome.webfont.ttf
fontawesome.webfont.woff2
fontawesome.webfont.woff

Like with most front-end build systems, this could very well be outdated in the near future so make sure to keep an eye on new developments.

Keep building 🚀🚀🚀

Software Developer from Canada 🇨🇦

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store