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

~ yarn add @babel/core babel-core babel-loader css-loader file-loader node-sass sass-loader style-loader

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

### webpack.config.js
const htmlWebpack = require('html-webpack-plugin');