This document provides help to get your Laravel 9 instance running with the latest versions of Laravel Mix and Font Awesome.
|
|
|
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!
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 🔥.