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

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