How to add Fontawesome 5 to Symfony 4 using Webpack Encore

问题

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?

回答1:

According font-awesome docs here, after install package

yarn add --dev @fortawesome/fontawesome-free

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.

回答2:

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

回答3:

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

回答4:

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

回答5:

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>

回答6:

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.

回答7:

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

来源：https://stackoverflow.com/questions/51571170/how-to-add-fontawesome-5-to-symfony-4-using-webpack-encore

标签

symfony4

font-awesome-5

webpack-encore