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.js
module.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
...