Michael Stivala

Copying Font Awesome Fonts with Laravel Elixir

Written by

in

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!

Comments

2 responses to “Copying Font Awesome Fonts with Laravel Elixir”

December 2, 2016

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.

Reply
1. December 2, 2016
  
  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.
  
  Reply

Leave a Reply Cancel reply

More posts