Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Want to use Laravel and Font Awesome? (Regularly updated)

Laravel Mix & Font Awesome Setup: Compiling Assets

This document provides help on getting your Laravel instance running with the latest versions of Laravel Mix and Font Awesome.

Mix

Steps

Build your webpack.mix.js configuration.

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

Install Font Awesome.

npm install @fortawesome/fontawesome-free

This will now be in your package.json.

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.13.0",

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';

Let's compile our 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!

@yurik94

This comment has been minimized.

Copy link

yurik94 commented Apr 1, 2019

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';

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

and I got:
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './font_awesome/css/font-awesome.min.css' in ...

😢
EDIT:

It was onsenui.

@GMien

This comment has been minimized.

Copy link

GMien commented Jun 28, 2019

Great shot @karlhillx now it works fine :) thanks.

@everdaniel

This comment has been minimized.

Copy link

everdaniel commented May 25, 2020

on Laravel 7, needed to add this to copy the fonts as I was getting a 404 on them:

mix.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');
@karlhillx

This comment has been minimized.

Copy link
Owner Author

karlhillx commented May 25, 2020

on Laravel 7, needed to add this to copy the fonts as I was getting a 404 on them:

mix.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');

@everdaniel Did you use 'npm run production'? This command will automatically put the files where needed under /public/fonts/vendor/@fortawesome/fontawesome-free/ and /css/app.css and /js/app.js.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.