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

@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