Kuzuto's avatar

Laravel8 with Fontawesome

Installed Laravel 8 with Jetstream. Trying to add Fontawesome to the project, but I can’t get it to accept the @import fontawesome in the app.css file. Anyone who has some pointers on how to add it?

0 likes
17 replies
bobbybouwmann's avatar

I expect you use the latest version which you installed like so

npm install @fortawesome/fontawesome-free 

You should then import them like this

// resources/sass/app.scss

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

Only include what you really need ;)

1 like
Kuzuto's avatar

When I’m using the Jetstream with Laravel 8, the webpack is using css/app.css and postCss. I tried adding the app.scss to the mix, but is giving error. I don’t know how tto add scss to the mix with a webpack made by Jetstream.

Kuzuto's avatar

Ok, but in Laravel 8 with Jetstream, the Webpack is :

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

So is not working by adding anything to a app.scss. Do I have to add the app.scss file and make somekind of include in the Webpack ?

Zalo's avatar

Same problem here, Jetstream is using css intead of scss, so, it throws an error when importing fontawesome. Any tip?

TomokoOhashi's avatar
Level 2

Try this.

1: change the code of webpack.mix.js as below

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

2: install Font Awesome (↓ in case of free version)

npm install --save @fortawesome/fontawesome-free

3: create a new file [ resources\sass\app.scss ] and add the code as below. ( resources/css/app.css won't be used.)

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

4: build them.

npm install && npm run dev
10 likes
Kuzuto's avatar

Thank you so much.. that worked!

grubi's avatar

Does anybody have a working solution for laravel 8 and font awesome? I tried the fix above but it's not working.

Kuzuto's avatar

Yes, I have it working. Did you install the Jetstream on your Laravel 8 ?

Kuzuto's avatar

Ok, then it should work. What errors are you getting ?

mathieu's avatar

I've been banging my head on this one for a while... No errors, compiles successfully, but my icons show up as empty boxes..

Aridez's avatar

Same for me, did you find any solutions for that?

scarneros's avatar

Probably missing FontAwesome fonts. Add this to your mix file after .sass() and it should work.

.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts')
friendlycode's avatar

This is great thanks - but whats the best way to purge the css thats not used? Purging of unused tailwind css is taken care of via postcss - do we need to load the purgecss plugin and run it all through mix.purgeCSS() afterwards or is there a better way? Thanks

friendlycode's avatar

In case this helps anyone else I was able to purge third party CSS using the following settings for the 'purge' function in the tailwind config file:

purge: {
    mode: 'all',
    preserveHtmlElements: false,
    content: [
      './src/**/*.js',
      './node_modules/flatpickr/**/*.js',
    ],
  },

as specified in the documentation: https://tailwindcss.com/docs/optimizing-for-production

Please or to participate in this conversation.