# Laravel Mix & Font Awesome Setup: Compiling Assets
This document provides help on getting your Laravel instance running with the latest versions of [Laravel Mix](https://laravel-mix.com/) and [Font Awesome](https://fontawesome.com/). Note: This guide is for Laravel versions 5 through 7. If you are using Laravel 8, please go [here](https://gist.github.com/karlhillx/89368bfa6a447307cbffc59f4e10b621).

<table>
    <tr>
      <td>
        <img src="https://camo.githubusercontent.com/ad0a21739b4fb3abda5cc171ac277a8053882135/68747470733a2f2f6c61726176656c2e636f6d2f6173736574732f696d672f636f6d706f6e656e74732f6c6f676f2d6d69782e737667" alt="Laravel Mix">
      </td>
      <td>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Font_Awesome_5_logo_black.svg/1024px-Font_Awesome_5_logo_black.svg.png" width="300" alt="Font Awesome">
      </td>
</table>

## Steps

Before triggering Laravel Mix, make sure that [Node.js and NPM](https://nodejs.org/en/download/) are installed on your machine.

    node -v
    npm -v
    
Install Node dependencies.

    npm install

Next, build your [webpack.mix.js](https://github.com/laravel/laravel/blob/master/webpack.mix.js) configuration.

<!-- language: lang-js -->
    const mix = require('laravel-mix');

    mix.setPublicPath('public')
    mix.setResourceRoot('../');

    mix.js('resources/js/app.js', 'public/js')
       .sass('resources/sass/app.scss', 'public/css');
       
Install the latest free version of [Font Awesome](https://fontawesome.com/) via the npm package manager.

    npm install -D @fortawesome/fontawesome-free

The following dependency entry should now be in your [package.json](https://github.com/laravel/laravel/blob/master/package.json).

<!-- language: lang-json -->

    // Font Awesome
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.3",

In [/resources/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/sass/app.scss) import one or more styles.

<!-- language: lang-css -->

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

Compile your assets and produce a minified, production-ready build.

    npm run production

Finally, reference your generated CSS file in your Blade template/layout.

<!-- language: lang-html -->

    <link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">

Happy Mixing!

---

## License

Copyright © 2021 [Karl Hill](https://www.github.com/karlhillx/).

Provided under the [MIT license](http://opensource.org/licenses/mit-license.php).

Whether you use these instructions or have learned something from them, please consider supporting me with a star ⭐ and a follow 🔥.