Skip to content

Instantly share code, notes, and snippets.

@karlhillx
Last active August 25, 2023 14:29
Show Gist options
  • Save karlhillx/89368bfa6a447307cbffc59f4e10b621 to your computer and use it in GitHub Desktop.
Save karlhillx/89368bfa6a447307cbffc59f4e10b621 to your computer and use it in GitHub Desktop.
Want to use Laravel 8 and Font Awesome 5? (Regularly updated)

Laravel asset compilation for Laravel 8 + Laravel Mix 6 + Font Awesome 5

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

Laravel Mix 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 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!


License

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 🔥.

@davidvandertuijn
Copy link

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 ?

@karlhillx
Copy link
Author

karlhillx commented Dec 30, 2020

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 ?

@davidvandertujin I don't think so, however, if you set the resource root in your webpack.mix.js to mix.setResourceRoot("../"); it should do the same thing. Also, if you need to change the public path you can use "mix.setPublicPath('public');

@jocelinkisenga
Copy link

i'm trying to install it but i fall in erros

@karlhillx
Copy link
Author

karlhillx commented Jul 20, 2021

i'm trying to install it but i fall in erros

@chisenga-coder What errors?

@MichaelNgogoyo
Copy link

hi, i installed and the successful message was given. But in the browser, it does not show the icons when i refer them.
while in the code, i use php storm, it gives me the suggestions .... I mean auto complete.......
what might be the problem?

@MichaelNgogoyo
Copy link

I use tailwind css
... hope it does not bring issues

@dassetto45
Copy link

Using the scss version of fontawesome i had to import the relative javascript file (all.js if you need all icons).

Into the resources dir I've created another directory called scss
Inside that dire I've created a fontawesome.scss file and put that inside:
@import "@fortawesome/fontawesome-free/scss/fontawesome";

Then I've added directly on webpack.mix.js

.js('node_modules/@fortawesome/fontawesome-free/js/all.js', 'public/js')
.sass('resources/sass/fontawesome.scss', 'public/css')

Compiled the resources
npm run dev

Lastly imported both files into my layout

<link href="{{ mix('css/font-awesome.css') }}" rel="stylesheet">
<script src="{{ mix('js/all.js') }}"></script>

I don't know if it's possible to do it in a neater way like importing the js into laravel's bootstrap.js but that worked for me

@Kayrah87
Copy link

Setting resource root to '../' leads to npm searching for the font files in resources/webfonts but there is no directory there as it's not copied over in your mix file above. I assume that this is also a necessary step in the build process?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment