Using Font Awesome with Laravel

For some reason there is a whole thread on this seemingly simple tasks.

In a bootstrapped Laravel 5.4 instance the following worked for me.

Install Font Awesome with NPM

npm install font-awesome

Import font-awesome in your app.scss file

// resources/assets/sass/app.scss

// Font Awesome
@import "node_modules/font-awesome/scss/font-awesome";

Copy the fonts to public directory

Adding the following to your elixir config in the gulpfile

.copy('node_modules/font-awesome/fonts', 'public/fonts')

My complete gulpfile looks like this:

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

require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application as well as publishing vendor resources.
 |
 */

elixir((mix) => {
    mix.sass('app.scss')
       .copy('node_modules/font-awesome/fonts', 'public/fonts')
       .webpack('app.js');
});

Run Gulp

If you run gulp you should be able to now start using font-awesome everywhere in your app.

If you made it this far, you should probably follow me on twitter. 🙂

This entry was posted in Hacking and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *