Symfony 5 can't use Font Awesome icons

Question

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 '~@fortawesome/fontawesome-free/css/fontawesome.css';
@import '~@fortawesome/fontawesome-free/css/regular.css';
@import '~@fortawesome/fontawesome-free/css/solid.css';
@import '~@fortawesome/fontawesome-free/css/brands.css';

4. 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 '~@fortawesome/fontawesome-free/css/all.min.css';
import '~@fortawesome/fontawesome-free/js/all.js';

4. Import Solid Font Awesome icons into CSS file (assets/css/app.css) (and also in JS file):

@import '~@fortawesome/fontawesome-free/css/solid.css';

5. 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?

Answer 1

Your first attempt is the right way, you just missed setting the $fa-font-path correctly.

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';