Using Font Awesome with Laravel

2017-04-09 Tags: hacking php 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.