Laravel Elixir and Font-Awesome

.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).

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
    mix.styles([
        "global/plugins/font-awesome/css/font-awesome.min.css",
        "custom-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):

        mix.sass('app.scss')
        .copy(
        'vendor/bower_components/font-awesome/fonts/fontawesome-webfont.eot',
        'public/css/fontawesome-webfont.eot')
        .copy(
        'vendor/bower_components/font-awesome/fonts/fontawesome-webfont.svg',
        'public/css/fontawesome-webfont.svg')
        .copy(
        'vendor/bower_components/font-awesome/fonts/fontawesome-webfont.ttf',
        'public/css/fontawesome-webfont.ttf')
        .copy(
        'vendor/bower_components/font-awesome/fonts/fontawesome-webfont.woff',
        'public/css/fontawesome-webfont.woff')
        .copy(
        'vendor/bower_components/font-awesome/fonts/fontawesome-webfont.woff2',
        'public/css/fontawesome-webfont.woff2')

Then in app.scss:

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

@import "vendor/bower_components/foundation/scss/foundation";

^ 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' });

3. 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.

4. 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) {
    mix.sass('app.scss');

    /*******************************************************
     *
     * STYLES
     *
     ******************************************************/

    var arrMainSassFiles = [
        'app.scss'
    ];

    var arrFrontendSassFiles = [
        'frontend/app.scss'
    ];

    var arrAdminSassFiles = [
        'admin/app.scss'
    ];

    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 = [
        '../../components/jquery/dist/jquery.min.js',
        '../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',
        'app.js'
    ];

    var arrFrontendScriptFiles = [
        'frontend/app.js'
    ];

    var arrAdminScriptFiles = [
        'admin/app.js'
    ];

    /********** 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
     *
     ******************************************************/

    mix.version([
        'css/frontend.css',
        'css/admin.css',
        'js/frontend.js',
        'js/admin.js'
        //'js/adminBundle.js',
        //'js/frontendBundle.js',
        //'js/dashboardBrowserify.js',
        //'js/indexProjectBrowserify.js',
        //'js/editProjectBrowserify.js',
        //'js/indexBlogBrowserify.js',
        //'js/editBlogBrowserify.js'
    ]);
});

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:

   mix.copy('node_modules/font-awesome/fonts','public/build/fonts')
   

5. Copile the sass file:

   mix.sass('app.scss', 'public/css/app.css')
   

6. Execute the gulp command:

   gulp --production
   

@matheus.goc

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?

edit:

Solved.

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.