Font Awesome 5 free en Sass gebruiken in Laravel 8

In dit artikel leg ik uit hoe je Font Awesome free kan installeren in een Laravel 8 applicatie.

Node package

Installeer de gratis Font Awesome node packages:

npm install @fortawesome/fontawesome-free

Sass optie toevoegen

We gaan de Font Awesome library inladen via Sass. Voeg in ./webpack.mix.js het volgende toe:

.sass('resources/sass/custom.scss', 'public/css');

Custom.scss toevoegen

Maak in ./resources/ een folder 'sass' aan. In deze folder een bestandje met de bestandsnaam custom.scss

Zet het volgende in custom.scss

@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "node_modules/@fortawesome/fontawesome-free/scss/brands";

Laravel mix compilen

In de command line, voer het volgende uit:

npm run dev

Custom.css

We moeten alleen de gecompilde stylesheet toevoegen in de html. In ./resources/views/layouts/app.blade.php, voeg de volgende regel toe in de header.

<link rel="stylesheet" href="{{ asset('css/custom.css') }}">

Ready!

Je zou nu Font Awesome moeten kunnen gebruiken. Voor alle icoontjes zie https://fontawesome.com/icons?d=gallery&p=2&m=free