Want to use Laravel 9 and Font Awesome 6? (Regularly updated)

laravel-9-laravel-mix-6-font-awesome-6.md

Laravel asset compilation for Laravel 9 + Laravel Mix 6 + Font Awesome 6

This document provides help to get your Laravel 9 instance running with the latest versions of Laravel Mix and Font Awesome.

Steps

Before triggering Laravel Mix, we want Node.js and NPM installed on your machine. Let's check by running the following commands.

node -v
npm -v

Install Node dependencies for Laravel Mix, Autoprefixer, and PostCSS.

npm install -D laravel-mix@latest postcss@latest autoprefixer@latest

Install the latest free version of Font Awesome via the npm package manager.

npm install -D @fortawesome/fontawesome-free

Next, build your Laravel Mix webpack.mix.js configuration.

const mix = require('laravel-mix');

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

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
]);

The following dependency entry should now be in your package.json.

"devDependencies": {
    "@fortawesome/fontawesome-free": "^6.0.0",

In /resources/css/app.css, import one or more styles depending on which icon set you are interested in using.

@import '~@fortawesome/fontawesome-free/css/fontawesome';
@import '~@fortawesome/fontawesome-free/css/regular';
@import '~@fortawesome/fontawesome-free/css/solid';
@import '~@fortawesome/fontawesome-free/css/brands';

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

npx mix -p

OR

npm run prod

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

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

Happy Mixing!

---

License

Copyright © 2022 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 🔥.

This did not work for me, I had to require fortawesome on my resources/js/app.js instead

Yep, worked like a charm. I had a syntax error until I realise i had declared const mix = require('laravel-mix'); twice in [webpack.mix.js]

In my case, I have imported files in /resources/sass/app.scss because my webpack.mix.js file already has

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();