Want to use Laravel and Font Awesome? (Regularly updated)

laravel-mix-font-awesome.md

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.

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

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

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

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

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'

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.

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 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"
}
}

@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"
}

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

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