Adding Font-Awesome to Laravel (The Laravel-Mix Way)
Tags: laravel, webpack, fontawesome, icons
Published: 2020-12-05 05:13:44

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:

```scss
...

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

```js
...

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:

```js
...

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:

```html

...

    <!-- 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](https://fontawesome.com/icons?d=gallery&m=free) and here are some examples:


```html

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