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.

@white_gecko I was wrong with paths, see the update of the question. — mimic, Feb 27 '19 at 16:00
Regarding the inconsistent _"it worked"_, _"it stopped working"_ behavior: I had to `yarn build` instead of `yarn dev` to debug my font-awesome / webpack-loaders problems. — kca, Jul 24 '20 at 11:23
Did you manage to make it work on webpack 5 using Asset Modules? — apflieger, Apr 25 '23 at 20:16

score 97 · Answer 1 · edited Jun 20 '20 at 09:12

97

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 02 '18 at 12:44

Cichy

4,602
3
23
28

2

If you're using Vue, then you need to use `vue-fontawesome` because the base library modifies the DOM in a way unsupported by Vue. – Nathan Goings Jul 11 '19 at 16:53
1

Great - first step was all that was needed for me. – obrienk Sep 12 '19 at 09:03
1

For all of you using FontAwesome5 this is the import to use in your app.js: import '@fortawesome/fontawesome-pro/css/all.css' – Kevin Katzke Oct 24 '19 at 21:25
Why not import via sass/css? – Honsa Stunna Jan 30 '20 at 17:05
Instead of `dom.i2svg()` I found that `dom.watch()` worked to turn on `` tag replacement. – Brendon Muir Oct 22 '20 at 22:30
Re the first variant, `import '@fortawesome/fontawesome-free/js/all'` works equally well in my case – Marcus Junius Brutus Feb 11 '21 at 16:57
With the API, how do you install only some icons to avoid a big bundle? – João Pimentel Ferreira Mar 03 '22 at 14:23

score 39 · Answer 2 · answered Sep 24 '19 at 19:48

39

This is what worked for me.

Taken from the user @ahbou on the webpacker issues page https://github.com/rails/webpacker/issues/619#issuecomment-430644035

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';

answered Sep 24 '19 at 19:48

Oliv312

551
4
7

5

This worked great for me. This approach is simpler than including via JS and seems like the "right" thing to do since these packages are just SCSS, after all... (Fwiw, if you're using npm instead of yarn, you do `npm install` instead of `yarn add`)) – rinogo May 01 '20 at 19:56

score 11 · Answer 3 · answered May 29 '20 at 09:00

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 https://github.com/rails/webpacker/issues/619#issuecomment-590454028

score 9 · Answer 4 · edited May 04 '21 at 16:58

9

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

edited May 04 '21 at 16:58

Bill

146
14

answered Sep 09 '20 at 13:50

Hari Roshan

344
4
10

Yes, you probably need a file loader! I also needed to add one for the SVGs. – asdf Dec 15 '20 at 10:49
Prepended a `~` for node_modules dir and this answer worked – Trip Feb 12 '21 at 14:24

ru10 · Answer 5 · 2018-10-18T06:16:13.193

5

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.

edited Oct 18 '18 at 06:16

answered Oct 18 '18 at 06:07

ru10

826
9
10

score 4 · Answer 6 · answered Aug 20 '19 at 22:30

4

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';

answered Aug 20 '19 at 22:30

Stan Wiechers

1,962
27
45

1

I didn't need the `~` for my `.scss` import but otherwise this was perfect. – t56k Feb 18 '20 at 23:33

score 0 · Answer 7 · answered Oct 21 '20 at 04:45

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';

How to make Font awesome 5 work with webpack

7 Answers7

1. Installed and added

2. Used with the API / SVG

Linked