DEV Community

Victor R.
Victor R.

Posted on

Laravel 8 and Fontawesome without SASS

Did a bunch of digging around today, without much luck, as most articles still require you to use scss/sass, are referencing older versions of Laravel. Plus the official documentation isn't stellar either. This article should serve as a quick reference to get things running.

First install these:
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons

Then edit your resources/js/app.js and add these lines:

import { library,dom} from '@fortawesome/fontawesome-svg-core';
import { faAirFreshener } from '@fortawesome/free-solid-svg-icons/faAirFreshener';
import { faAddressBook } from '@fortawesome/free-solid-svg-icons/faAddressBook';

library.add(faAddressBook, faAirFreshener)

dom.watch()
Enter fullscreen mode Exit fullscreen mode

Make sure your blade app layout file has the import in the <head>:

<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
Enter fullscreen mode Exit fullscreen mode

Now open your blade file of choice and add this code:

<i class="fas fa-address-book"></i>
<i class="fas fa-air-freshener"></i>
Enter fullscreen mode Exit fullscreen mode

Make sure npm run watch is using mix and is running. That's it.

Couple of side notes:
I tried using
import { faAirFreshener, faAddressBook } from '@fortawesome/free-solid-svg-icons';
But my public/js/app.js file blew up to 1.51mb. Importing them individually kept the js file to 795kb. I tried a variety of approaches but the above is the only one that didn't make my js file blow up in size.

My webpack.mix.js was updated for tailwindcss so it's not quite the default out-of-the-box version, here's what it looks like:

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

mix.disableNotifications()

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

if (mix.inProduction()) {
    mix.version();
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)