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 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.