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

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