Skip to content

Instantly share code, notes, and snippets.

@karlhillx
Last active December 21, 2022 15:35
Show Gist options
  • Save karlhillx/5e3bb4892fe18b61b644798751c7ba35 to your computer and use it in GitHub Desktop.
Save karlhillx/5e3bb4892fe18b61b644798751c7ba35 to your computer and use it in GitHub Desktop.
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. Note: This guide is for Laravel versions 5 through 7. If you are using Laravel 8, please go here.

Laravel Mix Font Awesome

Steps

Before triggering Laravel Mix, make sure that Node.js and NPM are installed on your machine.

node -v
npm -v

Install Node dependencies.

npm install

Next, build your webpack.mix.js configuration.

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

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

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

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

npm install -D @fortawesome/fontawesome-free

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

// Font Awesome
"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",

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

Compile your 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!


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

@karlhillx
Copy link
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. If it's not automatically putting it where you need you should use either:

mix.setResourceRoot('path'); 
mix.setPublicPath('path');

@Danielrogra
Copy link

does anyone know how to implement awasome fonts free in laravel 8 with jetstream/liveware? I got error when run npm run dev :/

@JeremyDfr
Copy link

does anyone know how to implement awasome fonts free in laravel 8 with jetstream/liveware? I got error when run npm run dev :/

Import font awesome in app.scss and add this line in webpack.mix.js :
.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');

Work for me in Laravel 8

@Danielrogra
Copy link

does anyone know how to implement awasome fonts free in laravel 8 with jetstream/liveware? I got error when run npm run dev :/

Import font awesome in app.scss and add this line in webpack.mix.js :
.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');

Work for me in Laravel 8

thanks for answering me

I think my problem is when I am trying to import the awesome font free into the app.css
I have tried so many different forms to import and doesn't work

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find '~@fortawesome/fontawesome-free/css/all.css'

@karlhillx
Copy link
Author

Laravel 8 has a slightly different directory structure and related file names. For instance, there's no /sass directory and the Webpack file is using PostCSS instead. I will try and update the instructions shortly.

@karlhillx
Copy link
Author

I think my problem is when I am trying to import the awesome font free into the app.css
I have tried so many different forms to import and doesn't work

Can you post your app.css, package.json, and webpack.mix.js? Also, I'm curious if you're using Tailwind or Bootstrap?

@Danielrogra
Copy link

I think my problem is when I am trying to import the awesome font free into the app.css
I have tried so many different forms to import and doesn't work

Can you post your app.css, package.json, and webpack.mix.js? Also, I'm curious if you're using Tailwind or Bootstrap?

I am using Tailwind.
my project contains jetstream /liveware using tailwind (I have the latest laravel version)

app.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

I have tried with
//@import '@fortawesome/fontawesome-free/css/all.css';
//@import '
@fortawesome/fontawesome-free/scss/fontawesome';


webpack.mix.js

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

module.exports = {
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
},
};
//mix.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');


pakage.json

{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"@tailwindcss/ui": "^0.6.0",
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"postcss-import": "^12.0.1",
"resolve-url-loader": "^3.1.0",
"sass": "^1.29.0",
"sass-loader": "^8.0.2",
"tailwindcss": "^1.8.0",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.1",
"font-awesome": "^4.7.0"
}
}

@karlhillx
Copy link
Author

karlhillx commented Nov 10, 2020

@Danielrogra

Try this, it worked for me:

webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [
            require('postcss-import'),
            require('tailwindcss'),
        ]
    });

Create /resources/sass/app.scss:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

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

package.json:

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@tailwindcss/ui": "^0.7.2",
    "axios": "^0.19",
    "cross-env": "^7.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.19",
    "postcss": "^8.1.4",
    "postcss-import": "^12.0.1",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.28.0",
    "sass-loader": "^8.0.2",
    "tailwindcss": "^1.8.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.2"
}

@Danielrogra
Copy link

Try this:

webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
postCss: [
require('postcss-import'),
require('tailwindcss'),
]
});

Create /resources/sass/app.scss:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

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

package.json:

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@tailwindcss/ui": "^0.7.2",
    "axios": "^0.19",
    "cross-env": "^7.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.19",
    "postcss": "^8.1.4",
    "postcss-import": "^12.0.1",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.28.0",
    "sass-loader": "^8.0.2",
    "tailwindcss": "^1.8.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.2"
}

Try this:

webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
postCss: [
require('postcss-import'),
require('tailwindcss'),
]
});

Create /resources/sass/app.scss:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

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

package.json:

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@tailwindcss/ui": "^0.7.2",
    "axios": "^0.19",
    "cross-env": "^7.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.19",
    "postcss": "^8.1.4",
    "postcss-import": "^12.0.1",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.28.0",
    "sass-loader": "^8.0.2",
    "tailwindcss": "^1.8.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.2"
}

thanks.. I understood a little bit more what happend....

I RUN npm run dev AND doenst show me error.. hehe
but when I going to use the awesome font free into the blade doenst show me the icon hehe
thanks

@achmadhadikurnia
Copy link

achmadhadikurnia commented Nov 13, 2020

Try this:
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
postCss: [
require('postcss-import'),
require('tailwindcss'),
]
});
Create /resources/sass/app.scss:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import '@fortawesome/fontawesome-free/scss/fontawesome'; @import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/solid'; @import '@fortawesome/fontawesome-free/scss/brands';
package.json:

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@tailwindcss/ui": "^0.7.2",
    "axios": "^0.19",
    "cross-env": "^7.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.19",
    "postcss": "^8.1.4",
    "postcss-import": "^12.0.1",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.28.0",
    "sass-loader": "^8.0.2",
    "tailwindcss": "^1.8.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.2"
}

Try this:
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
postCss: [
require('postcss-import'),
require('tailwindcss'),
]
});
Create /resources/sass/app.scss:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import '@fortawesome/fontawesome-free/scss/fontawesome'; @import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/solid'; @import '@fortawesome/fontawesome-free/scss/brands';
package.json:

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@tailwindcss/ui": "^0.7.2",
    "axios": "^0.19",
    "cross-env": "^7.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.19",
    "postcss": "^8.1.4",
    "postcss-import": "^12.0.1",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.28.0",
    "sass-loader": "^8.0.2",
    "tailwindcss": "^1.8.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.2"
}

thanks.. I understood a little bit more what happend....

I RUN npm run dev AND doenst show me error.. hehe
but when I going to use the awesome font free into the blade doenst show me the icon hehe
thanks

Change to this code. Its works for me.

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [
            require('postcss-import'),
            require('tailwindcss'),
        ]
    })
    .webpackConfig(require('./webpack.config'));

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