Laravel Elixir and Font-Awesome

Published 3 years ago by MThomas

Currently I include both my all.css and font-awesome.css files seperately in my appL

<link rel="stylesheet" type="text/css" href="/css/vendor/font-awesome.css">
<link rel="stylesheet" type="text/css" href="{{ elixir("css/all.css") }}">

Now I want to combine both in my app.scss file. In order to include (and manipulate based on its variables) I include bootstrap in my app.scss file:

@import "partials/copyright";
@import "partials/variables";
@import "bootstrap";
@import "partials/typography";
@import "partials/auth";
@import "partials/navigation";

// Etc.

Simply adding @import "font-awsome"; does not work. But how do I get it to work (using versioning if that matters)?

This is the gulpfile I currently use:

elixir(function(mix) {

Other solutions to limit the number of requests are welcome :)

3 years ago (35,400 XP)

.publish( 'font-awesome/fonts', 'public/fonts' ) .styles([ 'public/css/app.css', 'public/css/vendor/font-awesome.css' ])


@Arnout, That works as long as you're not versioning the file, than it can't locate the fonts (as they are not in the build directory).

3 years ago (35,400 XP)

You're right. Delete the font-awesome css publish lines from the gulpfile and place the font-awesome import in you're app.scss. Then adjust the font path variable.

$fa-font-path: "../../fonts" !default; @import "../../../vendor/bower_components/font-awesome/scss/font-awesome";


Sorry for my English, I am using a translator.

I'm doing as follows:

// gulpfile.js
var elixir = require('laravel-elixir');

elixir(function(mix) {
    // Master -- CSS
    ], 'public/output/master-final.css', 'public/assets');

    mix.copy('public/assets/global/plugins/font-awesome/fonts', 'public/fonts');

This code solves my problem, I hope it can be helpful to you.

Is not very "dynamic" because if I change the folder structure the fontawesome will not work. But it is simple and solves the problem xD


Copy the assets to your public directory (publish has been removed from Elixir now):


Then in app.scss:

$fa-font-path: "/../css"; // Or wherever you copied them to.

@import "vendor/bower_components/foundation/scss/foundation";
3 years ago (1,002,230 XP)

^ Longest way possible

Use whole folder

.copy('bower_components/fontawesome/fonts', 'public/assets/fonts')

The default link is up one level for fonts.

src: url('../fonts[...]

Here's what I did:

  1. Pulled in fontawesome with bower

  2. Compile the LESS directly from the bower folder:

mix.less( 'app.less', 'resources/assets/css', { paths: './bower_components/fontawesome/less' });
  1. Adjust my app.less:
@import "font-awesome";
@fa-font-path: "../../fonts";

I have to import the main less file for font-awesome. Since I want to use elixir.version, I know that my css will end up in public/build/css, so I need to need to overwrite the fa-font-path.

  1. Copy the fonts:
mix.copy('bower_components/fontawesome/fonts', 'public/fonts');

...And that's it! gulp --production and done!


That is what I have. I have downloaded jquery and fontawesome using bower (components-font-awesome). Notice there are some lines commented because for this new project I still don't use browserify but I know I am gonna use them with vue. And notice that at the end, what I have to link in the view is either and for the frontend or and for the admin.

And this is my gulpfile. I hope this helps someone!

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

 | 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 our application, as well as publishing vendor resources.

elixir(function(mix) {

     * STYLES

    var arrMainSassFiles = [

    var arrFrontendSassFiles = [

    var arrAdminSassFiles = [

    var arrMainCssFiles = [

    var arrFrontendCssFiles = [

    var arrAdminCssFiles = [

    mix.copy('resources/components/components-font-awesome/fonts', 'public/build/fonts');
    mix.copy('resources/assets/img', 'public/build/img');

    /********** FRONTEND ************/
    var arrSassFiles = arrMainSassFiles.concat(arrFrontendSassFiles);

    mix.sass(arrSassFiles, 'public/css/frontendSassCompiled.css');

    var arrCssFiles = arrMainCssFiles.concat(arrFrontendCssFiles).concat(['../../../public/css/frontendSassCompiled.css']);

    mix.styles(arrCssFiles, 'public/css/frontend.css');

    /******** END FRONTEND **********/

    /********** ADMIN ************/
    var arrSassFiles = arrMainSassFiles.concat(arrAdminSassFiles);

    mix.sass(arrSassFiles, 'public/css/adminSassCompiled.css');

    var arrCssFiles = arrMainCssFiles.concat(arrAdminCssFiles).concat(['../../../public/css/adminSassCompiled.css']);

    mix.styles(arrCssFiles, 'public/css/admin.css');

    /******** END ADMIN **********/

     * SCRIPTS

    var arrMainScriptFiles = [

    var arrFrontendScriptFiles = [

    var arrAdminScriptFiles = [

    /********** FRONTEND ************/
    mix.scripts(arrMainScriptFiles.concat(arrFrontendScriptFiles), 'public/js/frontend.js');

    /******** END FRONTEND **********/

    /********** ADMIN ************/
    mix.scripts(arrMainScriptFiles.concat(arrAdminScriptFiles), 'public/js/admin.js');

    /******** END ADMIN **********/

    //mix.browserify('admin/mainBrowserify.js', 'public/js/adminBundle.js');
    //mix.browserify('frontend/mainBrowserify.js', 'public/js/frontendBundle.js');
    //mix.browserify('admin/dashboardBrowserify.js', 'public/js/dashboardBrowserify.js');
    //mix.browserify('admin/project/indexBrowserify.js', 'public/js/indexProjectBrowserify.js');
    //mix.browserify('admin/project/editBrowserify.js', 'public/js/editProjectBrowserify.js');
    //mix.browserify('admin/blog/indexBrowserify.js', 'public/js/indexBlogBrowserify.js');
    //mix.browserify('admin/blog/editBrowserify.js', 'public/js/editBlogBrowserify.js');

     * VERSION



Just copy the fonts directory to public/build/fonts if you're using Elixir versioning.


I think elixir should replace the original file with the versioned file to avoid these problems.


I did the same like @apocalyarts has done but using npm instead bower and sass instead less:

  1. Add the font-awesome on package.json dependencies:
      "private": true,
      "devDependencies": {
        "gulp": "^3.9.1"
      "dependencies": {
        "laravel-elixir": "^5.0.0",
        "bootstrap-sass": "^3.0.0",
        "font-awesome": "*"
  2. Update the package:
    npm update
  3. Import the font-awesome.scss on app.scss:
    @import "node_modules/font-awesome/scss/font-awesome";
  4. Copy the fonts to build folder:
  5. Copile the sass file:
    mix.sass('app.scss', 'public/css/app.css')
  6. Execute the gulp command:
    gulp --production
2 years ago (39,645 XP)


thanks for the tip. However my fonts are coming out like this:

.fa-themeisle:before { content: ""; } sublime actually shows little box with a question mark in it. rather than "".

Any ideas?



At the top of app.scss you need to add:

@fa-font-path:   "../fonts";

I also changed the public/builds/fonts to just public/fonts because I liked having 1 less folder depth.

Please sign in or create an account to participate in this conversation.