Adding Font-Awesome to Laravel (The Laravel-Mix Way)

Using Font-Awesome is still a popular way to adding icons on your web because it provides a free-tier plan with many icons that cover most of your needs.

I believe many people still use the font-awesome via CDN to get started quickly. But using the CDN version of any libraries isn't configurable and not the modern way compared to these days' development. Modern developer tend to use webpack or any assets builder to unify resources into single css file and minimize everything as small as possible for web performance.

In Laravel, we got laravel-mix that uses webpack for building the assets. Let's try to add font-awesome to the build.

Prerequisites to code along

Prepare your own existing or new ready-to-be-developed laravel app and make sure to have NodeJS & NPM installed on your machine. And you have to know how to use SASS/SCSS in laravel to apply the styles and fonts.

Installing Font-Awesome (Free Version)

We use NPM to install the font-awesome-free package:

npm install @fortawesome/fontawesome-free --save-dev

Importing Font-Awesome Assets

In resources/sass/app.scss file, import the font-awesome styles:

...

// Font-Awesome
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

...

In the above code, I imported regular, solid, and brands styles. If you only need a certain style, feel free to remove the remaining styles.

Exporting Font files

In the webpack.mix.js file, find the mix configuration like below:

...

mix
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

...

And add the copy build for font-awesome like this to export the font-files when you are building the assets:

...

mix
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copy(
        'node_modules/@fortawesome/fontawesome-free/webfonts',
        'public/webfonts'
    );

...

Build

You could build the assets using:

npm run development

or

npm run production

When you are done building, the font files should be exported to public/webfonts folder.

Adding Icons

Before we trying the font-awesome class, make sure you are using the default laravel external CSS usage in your layout like this:

...

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

...

or the fonts won't show up.

it's recommended to use mix() instead of asset() to enable cache-busting when deploying for production. But also enable the versioning in webpack.mix.js file.

Now add any icons to make sure it works. You can find it on https://fontawesome.com/icons?d=gallery&m=free and here are some examples:

<!-- Regular -->
<i class="far fa-user"></i>

<!-- Solid -->
<i class="fas fa-user"></i>

<!-- Brand -->
<i class="fab fa-dev"></i>

version used:

laravel-mix 5.0.7
@fortawesome/fontawesome-free 5.15.1

nodejs v14.15.1
npm 6.14.8