Load FontAwesome Fonts with Webpack 2

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.

HTH,


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




8 thoughts on “Load FontAwesome Fonts with Webpack 2

  1. Thanks! Got through step one and realized the Sass plugin was busted… then thought “this should be simpler and require no plugin”. You confirmed this suspicion. Can’t see the ad though :(

  2. Thanks a lot, I was also not happy with the other solutions, and this worked for me with webpack 2.3.2 and using the latest recommended syntax:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top