How to make Font awesome 5 work with webpack

I'm trying to use Fontawesome in my Flask/webpack project.

The craziest thing is some point it worked then stopped, I changed something stupid, it worked again and finally it stopped working completely.

What I have:

package config:

 "devDependencies": { ... "css-loader": "^1.0.0", "node-sass": "^4.9.3", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "webpack": "^4.19.0", "webpack-cli": "^3.1.0", "webpack-merge": "^4.1.4" }, "dependencies": { "@fortawesome/fontawesome-free": "^5.3.1", "bootstrap": "^4.1.3", ... } 

webpack config (rules section):

 test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, use: [{ loader: 'file-loader', options: { name: '[name].[ext]', outputPath: '../fonts/', publicPath: '../static/fonts' } }] }, { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }, { test: /\.scss$/, use: [ "style-loader", "css-loader", "sass-loader" ] }, 

webpack, entry section:

entry: { myStyles: './stles/myStyles.js' }, 

myStyles.js:

import fontawesome from "@fortawesome/fontawesome-free/scss/fontawesome.scss"; import regular from "@fortawesome/fontawesome-free/scss/regular.scss"; import solid from "@fortawesome/fontawesome-free/scss/solid.scss"; import brands from "@fortawesome/fontawesome-free/scss/brands.scss"; fontawesome.library.add(solid, regular, brands) 

The last line though caused the error in Chrome:

Uncaught TypeError: Cannot read property 'add' of undefined 

I also tried to add imports into my entry scss and it worked at some point, then stopped:

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; @import "~@fortawesome/fontawesome-free/scss/fontawesome"; @import "~@fortawesome/fontawesome-free/scss/regular"; @import "~@fortawesome/fontawesome-free/scss/solid"; @import "~@fortawesome/fontawesome-free/scss/brands"; 

So, finally in my template I have:

<i></i> 

and what I see is only squares.

I checked Chrome, fonts are loaded (ttf, woff, woff2).

Please help. I already spent more than 6(!!!!) hours wasted on this problem and it's more than I spent on anything else related with webpack.

UPD I think I figured it out. I found that my public path was wrong, I mean this part of webpack config: publicPath: '../static/fonts' - it currently points to the static/fonts folder one level up from my html. First of all, relative path is wrong per se, secondly, a relative path will not work for other folders, third, I've changed it to the relative to the root: '/static/fonts' and it worked.

7 Answers

In my project (HTML Starter with webpack 4.26.1) I added FontAwesome via two variants:

1. Installed and added

I just installed FontAwesome Free (v5.5.0)

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

and I added to index.js

import '@fortawesome/fontawesome-free/js/fontawesome' import '@fortawesome/fontawesome-free/js/solid' import '@fortawesome/fontawesome-free/js/regular' import '@fortawesome/fontawesome-free/js/brands' 

Source code / Commit

2. Used with the API / SVG

I installed FontAwesome (svg-core, brands-icons, regular-icons, solid-icons)

npm install --save-dev @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons 

and I added to JS file

import { library, dom } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' import { far } from '@fortawesome/free-regular-svg-icons' import { fab } from '@fortawesome/free-brands-svg-icons' library.add(fas, far, fab) dom.i2svg() 

Source code with comments / Commits

This is what worked for me.

Taken from the user @ahbou on the webpacker issues page

on your console

yarn add @fortawesome/fontawesome-free 

inside your .scss file

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; @import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import '~@fortawesome/fontawesome-free/scss/solid'; @import '~@fortawesome/fontawesome-free/scss/regular'; 

this worked for me

import "@fortawesome/fontawesome-free/js/all.js"; import "@fortawesome/fontawesome-free/css/all.css"; 

in: app/javascript/packs/application.js

my case: Rails 6 webpacker gem, webpack, yarn

installed via yarn add @fortawesome/fontawesome-free

from

First install the following,

npm install file-loader @fortawesome/fontawesome-free --save 

And then in the webpack.config.js, Add

{ test: /\.(woff|woff2|eot|ttf|otf)$/, loader: "file-loader", options: { outputPath: "../fonts", } } 

Finally,

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

This should do the trick

Just import this file in your myStyle.js

import '@fortawesome/fontawesome-free/js/all' 

or you can import only specific size of icons

import '@fortawesome/fontawesome-free/js/light' import '@fortawesome/fontawesome-free/js/regular' import '@fortawesome/fontawesome-free/js/solid' import '@fortawesome/fontawesome-free/js/brands' 

I think fontawesome.library.add() is not needed.

I am using the pro version, which is essentially the same in terms of usage, the ending of the name is '-pro' instead of '-free'.

I am importing the font awesome all.js file into my index.js file:

import '@fortawesome/fontawesome-pro/js/all.js' 

And importing the css into my index.scss file:

@import '~@fortawesome/fontawesome-pro/css/all.css'; 

Incase anyone comes looking for a solution for implementing font awesome 5 (fa5) in symfony 4+ applications using webpack, the solution is the same as others have mentioned previously.

So firstly you will have to install fontawesome. Run yarn add @fortawesome/fontawesome-free on your terminal.

Then you simply require all.css and all.js in your app.js file. Incase it's not clear which app.js file I'm referring to here, you can find the app.js file in the app-root/assets/js directory.

import '@fortawesome/fontawesome-free/js/all.js';

import '@fortawesome/fontawesome-free/css/all.css';