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?