How to add Fontawesome 5 to Symfony 4 using Webpack Encore

webpack encore symfony4
symfony add webpack
webpack symfony tutorial
symfony/webpack bootstrap
webpack symfony build
font awesome
symfony 4 compile scss
symfony install js library

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?

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.

Incorrect paths for fonts · Issue #88 · symfony/webpack-encore · GitHub, I used (of course) webpack-encore to manage my assets. It works I use font-​awesome to add web-fonts. vctls commented on Sep 5, 2018 •. I would like to use bootstrap with Webpack Encore in Symfony 4.1 but bootstrap does not function. In the template/base.html.twig file in this post, I used some bootstrap classes but it is not taken into account and I don't understand why. I installed the dependencies I need for bootstrap with yarn:

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

Comment ajouter Fontawesome 5 à Symfony 4 à l'aide de Webpack , Je souhaite ajouter Font Awesome 5 à mon projet Symfony 4, voici ce que j'ai fait: le fil: yarn add --dev @fortawesome/fontawesome-free J'ai importé une police géniale dans mon fichier ma configuration webpack encore inclut mes fichiers scss et js: . (jpe?g|png|gif|svg)$/i, use: [ 'file-loader?name=images/[​name]. Symfony 4 - Installer Webpack encore pour gérer nos assets En savoir plus sur les formations : https://roadtodev.formator.io/ Rejoignez le groupe facebook :

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

Cómo agregar Fontawesome 5 a Symfony 4 usando Webpack Encore, Quiero agregar Font Awesome 5 a mi proyecto Symfony 4, esto es lo que hice: mi proyecto usando el hilo: yarn add --dev @fortawesome/fontawesome-free Importé una fuente (jpe?g|png|gif|svg)$/i, use: [ 'file-loader?name=images/[​name]. My context: I host my webiste under a given path. I do not use symfony but we don't care here. I used (of course) webpack-encore to manage my assets. It works well except for fonts because of my extra path.

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

Require CSS!? > Webpack Encore: A Party for your Assets , Video not working? It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the  Adding Custom Loaders¶ Encore already comes with a variety of different loaders out of the box, but if there is a specific loader that you want to use that is not currently supported, you can add your own loader through the addLoader function. The addLoader takes any valid webpack rules config.

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>

Font Awesome & file-loader [hash] > JavaScript for PHP Geeks , SymfonyCasts Logo. In this course COURSE. JavaScript for PHP Geeks: Webpack for Module Loading Awesomeness Next, in layout.js , you guys know what to do - add require('font-awesome/') . To get the In webpack.config.js , remove the simple file-loader and use the expanded syntax from earlier. lines 5 - 14. In the webpack-encore base template, there is this line : // uncomment for legacy applications that require $/jQuery as a global variable .autoProvidejQuery() It defines jQuery ($) as a global variable so that it's usable by other scripts.

Let's webpack… encore! - disjfa, Symfony? Webpack encore is built for symfony, but by no means are we gonna use that this time. The simple way to put this is, it builds the entire webpack.​config.js for you. Harder way is, it on the internet. npm i popper.js bootstrap@​4.0.0-beta.2 font-awesome 5 Useful JavaScript Time and Date Manipulation Libraries. Installing Encore in Symfony Applications¶. Run these commands to install both the PHP and JavaScript dependencies in your project: If you are using Symfony Flex, this will install and enable the WebpackEncoreBundle, create the assets/ directory, add a webpack.config.js file, and add node_modules/ to .gitignore.

Using Bootstrap CSS & JS (Symfony Docs), Using Bootstrap CSS & JS: Want to use Bootstrap (or something similar) in your project? For example, if you already have a global.scss file, import it from there: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 If you need to use jQuery plugins that work well with jQuery, you may need to use Encore's autoProvidejQuery() method so  Encore's job (via Webpack) is simple: to read and follow all of the require() statements and create one final app.js (and app.css) that contains everything your app needs. . Encore can do a lot more: minify files, pre-process Sass/LESS, support React, Vue.js,

Compilation error with Symfony Webpack Encore and FontAwesome, Compilation error with Symfony Webpack Encore and FontAwesome Obviously​, the error has to do with how I'm attempting to include FontAwesome, but I'm new bootstrap-4 symfony3.4 font-awesome-5 webpack-encore. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more Add css file to Symfony App using Webpack Encore

Comments
  • 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.
  • Had the exact same problem as in the question, your answer solved it for me. Thanks.
  • groups: .fa,.fab,.fal,.far,.fas