DEV Community

Cover image for Adding Font-Awesome to Laravel (The Laravel-Mix Way)
Dendi Handian
Dendi Handian

Posted on • Edited on

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

Top comments (8)

Collapse
 
t5000 profile image
Tomislav

No need for adding .copy to mix in post sass Laravel (tested on 8.79.0), the @import in app.css does that for you :)
(defaults to "app-root \ fonts \ vendor \ font-vendor \ font-name")

Collapse
 
dendihandian profile image
Dendi Handian

Thanks for the info. FYI the Laravel version doesn't matter for the assets build, it's the Laravel-Mix version that matter.

Collapse
 
musgan profile image
musgan

how to change "/fonts/vendor/@fortawesome/fontawesome-free" to path "../fonts/vendor/@fortawesome/fontawesome-free" ?

Collapse
 
t5000 profile image
Tomislav

What exactly do you mean? Where are you trying to change the path and why?

Collapse
 
chiefbrob profile image
Brian Obare

this works like a charm

Collapse
 
iamchapita profile image
Luis Alejandro Morales

Thank you <3

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