This document provides help to get your Laravel 8 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 webpack.mix.js configuration. Please note that we are no longer using SASS (as we did in previous Laravel versions) to compile our CSS assets.
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": "^5.15.3",
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';
Now, we want to update our package.json to use the new Mix CLI. Please change the "scripts" section of package.json to the following (if it isn't already updated).
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
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 © 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 🔥.
When using fontawesome-pro, i get this error:
ModuleNotFoundError: Module not found: Error: Can't resolve '../webfonts/fa-brands-400.eot'
Could i still set 'fa-font-path' somehow while not using sass ?