How to make Font awesome 5 work with webpack

Question

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 class="fas fa-user-circle fa-fw"></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.

Answer 1

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