Symfony 5 can’t use Font Awesome icons

I am trying to import Font Awesome into my Symfony 5 with Webpack Encore project but I can’t. I have read all the (most of them) S.O questions, framework tutorials, etc. but none of the icons are being displayed.

Steps I followed:

First attempt:

  1. Compile assets and watch for changes with yarn watch
  2. Install Font Awesome Free: yarn add --dev @fortawesome/fontawesome-free
  3. Import CSS files into app.css file (assets/css/app.css):
@import '[email protected]/fontawesome-free/css/fontawesome.css';
@import '[email protected]/fontawesome-free/css/regular.css';
@import '[email protected]/fontawesome-free/css/solid.css';
@import '[email protected]/fontawesome-free/css/brands.css';
  1. Add the icon to the TWIG template: <i class="fas fa-star"></i> ( I also tried to prepend the icon with fa fa-star, according to Font Awesome documentation.

Second attempt:

  1. Compile assets and watch for changes with yarn watch
  2. Install Font Awesome Free: yarn add --dev @fortawesome/fontawesome-free
  3. Import CSS / JS files into app.js file (assets/js/app.js):
import '[email protected]/fontawesome-free/css/all.min.css';
import '[email protected]/fontawesome-free/js/all.js';
  1. Import Solid Font Awesome icons into CSS file (assets/css/app.css) (and also in JS file):
@import '[email protected]/fontawesome-free/css/solid.css';
  1. Add the icon to the TWIG template: <i class="fas fa-star"></i>

I also have tried using CSS unicode:

element {
    content: "f005" 
}

None of them displays any icon, or any console error, warning, message, or anything, but I get an empty icon every time. Any clues?

Source: Symfony Questions

Was this helpful?

0 / 1

Leave a Reply 0

Your email address will not be published. Required fields are marked *