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 fina

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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