How to implement Font Awesome with the Webpack build tool

If you’re using Webpack, adding icons to your build from Font Awesome can be accomplished in a few easy steps. Download Project

In this example I’ll be adding a “check circle” icon to a confirmation message. Please note this example is a React component so beware of the React specific syntax such as “className”.

To use the Font Awesome library a few loaders are required

  • @babel/core
  • babel-core
  • babel-loader
  • css-loader
  • file-loader
  • node-sass
  • sass-loader
  • style-loader
  • If LESS is preferred install the less-loader

Next, edit the configuration file to address testing against the library’s assets. Here’s the example’s configuration

Then import the files you would like to use in your build. For this example the build imports the all.css. This file has everything.

Add icon selector to the element
<i className=”fas fa-check-circle fa-3x”></i>

Build and Viola!!!

More on this topic can seen in the video below

bshelling is full stack developer/software engineer from New Orleans, with a background in graphic design and digital marketing.

Follow him on Twitter @bshelling

Shelling is what they call me. A forward thinker debugging life's code line by line. Creator, crossfitter, developer, engineer

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