Webpack and Font Awesome

Adding Font Awesome to a static site generator that uses webpack.

I’m using the hugo netlify template, but it didn’t come with any font icons. I chose Font Awesome because I have used it before, but the same steps should apply to any other icon set that has an npm package.

Add icon to test.

On one of your pages add an icon to test with.

<i class="fas fa-bug"></i>

Install Font Awesome npm package

npm i --save-dev @fortawesome/fontawesome-free

Update webpack

In my template the copy-webpack-plugin was already in the packages.json file, however if it’s not in yours:

npm i --save-dev copy-webpack-plugin

In webpack.common.js add the require statement and add the new plugin to the list. This will cause webpack to copy the fonts from node_modules to your dist directory:

const CopyWebpackPlugin = require("copy-webpack-plugin");
...
module.exports = {
  ...
  plugins: [
    ...
    new CopyWebpackPlugin([
      {
        from: "./node_modules/@fortawesome/fontawesome-free/webfonts/",
        to: "webfonts/"
      }
    ]),
    ...
  ]
  ...
};

Update scss

Add imports to your main.scss. This is what ended up being my issue, I thought i could include fontawesome.scss or solid.scss by itself, but that wasn’t enough, you need both.

$fa-font-path: "/webfonts";
@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "node_modules/@fortawesome/fontawesome-free/scss/solid.scss";