This document provides help on getting your Laravel instance running with the latest versions of Laravel Mix and Font Awesome. Note: This guide is for Laravel versions 5 through 7. If you are using Laravel 8, please go here.
Before triggering Laravel Mix, make sure that Node.js and NPM are installed on your machine.
node -v
npm -v
Install Node dependencies.
npm install
Next, build your webpack.mix.js configuration.
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 via the npm package manager.
npm install -D @fortawesome/fontawesome-free
The following dependency entry should now be in your package.json.
// Font Awesome
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
In /resources/sass/app.scss import one or more 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';
Compile your assets and produce a minified, production-ready build.
npm run production
Finally, reference your generated CSS file in your Blade template/layout.
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
Happy Mixing!
Copyright © 2021 Karl Hill.
Provided under the MIT license.
Whether you use these instructions or have learned something from them, please consider supporting me with a star ⭐ and a follow 🔥.
Laravel 8 has a slightly different directory structure and related file names. For instance, there's no /sass directory and the Webpack file is using PostCSS instead. I will try and update the instructions shortly.