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-awesomeImport 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!
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.
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.