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?

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