Michael Stivala

Copying Font Awesome Fonts with Laravel Elixir

Written in 2016. Some of the tools and versions here have moved on since.

For some reason, I always have trouble setting up Font Awesome (quickly) with Laravel & Elixir.

It's three easy steps.

Pull in font-awesome with npm or yarn

# npm
npm install font-awesome --save

# yarn
yarn add font-awesome

Import Font Awesome's stylesheets in your app.scss file

@import "node_modules/font-awesome/scss/font-awesome.scss";

Copy Font Awesome's font files to your public directory

Configure Elixir to do this automatically for you in your gulpfile:

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

This last step is the one that I mix up, specifically the *.* .

Hopefully this will help someone like me!

From the old comments

Comments are closed. These were left on the original post.

  1. Simon Depelchin,

    Hi Michael, I've already been using this in my projects. I'm also using browsersync when I'm in development and thus it's copying all the fonts every time I'm changing my CSS or my javascript... I was wondering if you found out a way to "detect" if we were in production or in dev in the gulpfile to avoid copying files every time.

  2. Michael Stivala,

    Hey Simon, Perhaps you could use the "—production" flag for that? I've never tried it myself, but Elixir's config should reflect whether the flag was passed ("elixir.config.production"), allowing you to write some conditional to only perform certain actions when the flag is present/absent.

More writing