Skip to content

Instantly share code, notes, and snippets.

@Artistan
Forked from karlhillx/laravel-mix-font-awesome.md
Last active April 10, 2019 12:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Artistan/c24fd79ff52961c2225208f8a3422a64 to your computer and use it in GitHub Desktop.
Save Artistan/c24fd79ff52961c2225208f8a3422a64 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.

Mix

Steps

Build your webpack.mix.js configuration.

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Install Font Awesome.

npm install @fortawesome/fontawesome-pro

This will now be in your package.json.

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-pro": "^5.8.0",

In /resources/sass/app.scss import one or more styles.

// Fontawesome
@import '~@fortawesome/fontawesome-pro/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-pro/scss/regular.scss';
@import '~@fortawesome/fontawesome-pro/scss/solid.scss';
@import '~@fortawesome/fontawesome-pro/scss/brands.scss';

Let's compile our 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="{{ asset('css/app.css') }}">

Happy Mixing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment