30

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?

bahman parsamanesh
  • 2,148
  • 3
  • 11
  • 29
sylvain
  • 465
  • 1
  • 6
  • 13

7 Answers7

30

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.

Giovani
  • 1,921
  • 1
  • 18
  • 13
  • 9
    One amendment - font-awesome docs say: _Reference **either** the /css/all.css **or** the /js/all.js, which contains everything you need to use Font Awesome_ As I understand, it is not necessary to include both. – ox160d05d Jan 02 '19 at 15:26
11

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.

Kaizoku Gambare
  • 2,285
  • 1
  • 21
  • 34
8

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';
ETNyx
  • 180
  • 5
  • Had the exact same problem as in the question, your answer solved it for me. Thanks. – scandel Jan 18 '19 at 10:18
  • This should be marked as the right answer. However, I also had to do `@import "~@fortawesome/fontawesome-free/css/all.min.css";` after `regular` and `solid` as the answer suggests (FA 5.10.2). @sylvain, could you please mark an answer as accepted? – Alex Karshin Mar 27 '20 at 01:24
  • Hello Alex, all.min.css contains compiled all of fontawesome scss. So if you want compile own variant (eg. without brands or so,..) you don't want import css/all.min.css, From docs: mport Font Awesome by adding \@import "scss/fontawesome.scss" in your main SCSS file. Also, import one or more styles \@import "scss/solid.scss" in your main SCSS file. Compile your code and get to using those new icons in your project! – ETNyx Mar 27 '20 at 13:33
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'
    ]
}]
Jesse Quinn
  • 61
  • 4
2

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

Pouyan
  • 477
  • 1
  • 7
  • 13
2

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>
parrotinweb
  • 21
  • 2
-1

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

Ayman Kobi
  • 1
  • 6