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/f

Answer 1

I think I found a solution to your problem, It is not probably the best but a starting point. According to Font Awesome Documentation you should add the all.css to your code. Or the @fontface imports statements there.

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

Answer 2

You need to install copy-webpack-plugin, please follow below instructions and it'll work for you 1- install the plugin

yarn add copy-webpack-plugin --dev

2 add following line to your webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');

3: compile

yarn run encore dev

test the page again it should now show the missing icons

Answer 3

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.

Answer 4

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>

Answer 5

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

Answer 6

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'
    ]
}]