Load FontAwesome Fonts with Webpack 2

Posted by in Software

TL;DR:: Add the (s)css dependency to your main (s)css file and specify where to find the fonts too. Then use the proper loaders in your webpack.config.js file.

The past few days I had trouble loading the font-awesome fonts with webpack. I tried quite a few solutions:

Nothing seemed to work propoerly. I either had the fonts ignored or got errors of files not found.

Finally, I have the following combination which works (webpack 2.2.0):

In my main SCSS file I have:

In my webpack.config.js:

Note the loaders in the config for scss. If you use the raw loader, the imports will not be parsed and dependent fonts will not be discovered.

More complete files are here.


A little experiment: If you find this post and ad below useful, please check the ad out :-)