DEV Community

loading...
Cover image for Adding Font-Awesome to Laravel (The Laravel-Mix Way)

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

Dendi Handian
I am that backend programmer who doesn't return 200 OK for errors and doesn't write only POST method for all endpoints.
Updated on ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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

...
Enter fullscreen mode Exit fullscreen mode

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

...
Enter fullscreen mode Exit fullscreen mode

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

...
Enter fullscreen mode Exit fullscreen mode

Build

You could build the assets using:

npm run development
Enter fullscreen mode Exit fullscreen mode

or

npm run production
Enter fullscreen mode Exit fullscreen mode

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">

...

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

version used:

laravel-mix 5.0.7
@fortawesome/fontawesome-free 5.15.1

nodejs v14.15.1
npm 6.14.8
Enter fullscreen mode Exit fullscreen mode

Discussion (2)

Collapse
ffpaiki profile image
Fridolin Febrianto Paiki • Edited

thanks for the info... been looking around for this

Collapse
mnabawy profile image
Mnabawy

thanks my friend I appreciate your efort ;)