How to add Fontawesome 5 to Symfony 4 using Webpack Encore

Question

I want to add Font Awesome 5 to my Symfony 4 project, this is what I did :

• I added font awesome to my project using yarn : yarn add --dev @fortawesome/fontawesome-free
• I imported font awesome in my main scss file (assets/css/app.scss) : @import '~@fortawesome/fontawesome-free/scss/fontawesome';
• my webpack encore configuration include my scss and js files : .addEntry('js/app', './assets/js/app.js') .addStyleEntry('css/app', './assets/css/app.scss')
• I compiled : ./node_modules/.bin/encore dev

Everything seems ok, but when I try to use font awesome in my view I only get a square icon instead. The generated app.css file seems ok as I can see the font awesome icons definitions, for example :

.fa-sign-out-alt:before {
    content: "\F2F5";
}

It just seems that the 'content' part is missing, I guess because the fonts are not loaded... Do I need to add something to load the webfonts? I tried to add the font awesome js in my app.js asset file but it doesn't change anything. I also tried to add custom loaders to my webpack encore configuration (like this https://github.com/shakacode/font-awesome-loader/blob/master/docs/usage-webpack2.md#setup-for-webpack-2) I also tried to clear the cache, same result...

Any idea?

Solution 1

According font-awesome docs here, after install package

yarn add --dev @fortawesome/fontawesome-free

or

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

Require font-awesome into your config file (in my case and default Symfony 4 location) assets/js/app.js:

require('@fortawesome/fontawesome-free/css/all.min.css');
require('@fortawesome/fontawesome-free/js/all.js');

Compile again yarn encore dev and icons should appear.

Solution 2

I recomand to check this video on Symfonycast to understand what is going on. (fyi : Ryan Weaver the author of the video is also the main dev of Encore).

https://symfonycasts.com/screencast/webpack-encore/css

The part about font-awesome start at 4:00.

In short :

Font-awesome v4 :

yarn add font-awesome --dev

then in your .css file

@import '~font-awesome';

Font-awesome v5 :

yarn add --dev @fortawesome/fontawesome-free

then in your .css file

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

You may ask why @import '~@fortawesome/fontawesome-free'; isn't working ? Because the shortcut syntax check for the 'style' key of the @fortawesome package.json file.

At the moment we have

  "style": "css/fontawesome.css",

Webpack will include fontawesome.css in your css but nothing from the webfont directory. This is why you see black square. The font isn't here because in fontawesome.css the path to the font directory is never mentioned. Thus Webpack won't copy the font directory to your build. But if you look at all.css you will find stuff like this

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

So webpack will detect that he needs to copy the font to the build. This is why you need to specify the exact file.

Solution 3

Adding @import '~@fortawesome/fontawesome-free/scss/fontawesome'; is not enough. You need to add one (or any combination) of these files (depend on your use-case)

@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

Solution 4

The following as above works perfectly for me:

npm install @fortawesome/fontawesome-free @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons -D

Add the following into a .scss file

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

works with webpack 4

{
    test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    use: 'url-loader?limit=10000',
},
{
    test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
    use: 'file-loader',
},
{
    test: /\.(jpe?g|png|gif|svg)$/i,
    use: [
        'file-loader?name=images/[name].[ext]',
        'image-webpack-loader?bypassOnDebug'
    ]
}]

Solution 5

Giovani has right. Next you must look at group of icons. Every icon in font-awesome has its own group. If you forget this, you get square icon instead.

<i class="fab fa-accusoft"></i>
<i class="fas fa-address-book"></i>

View more solutions