Laravel Elixir and Font-Awesome

Published 2 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) {
 mix
    .sass('app.scss')
    .scripts(
   [
    'jquery/dist/jquery.min.js',
    'bootstrap-sass-official/assets/javascripts/bootstrap.js',
   ], 
   'bower_components',
   'public/js/dependencies.min.js'
    )
    .publish(
   'font-awesome/css/font-awesome.min.css',
   'public/css/vendor/font-awesome.css'
    )
    .publish(
   'font-awesome/fonts',
   'public/css/fonts'
    )
    .styles([
   'public/css/app.css'
    ])
    .version("css/all.css");
});

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

Arnout
Arnout
2 years ago (33,600 XP)

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

MThomas

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

Arnout
Arnout
2 years ago (33,600 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";

kuroski

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

DanSmith

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";
bashy
bashy
2 years ago (1,083,100 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[...]
apocalyarts

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!

gabohbeaumont

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

mstnorris
mstnorris
1 year ago (500,095 XP)

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

mtvs_dev

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

matheus.goc

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
    
andy
andy
1 year ago (39,545 XP)

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

Sign In or create a forum account to participate in this discussion.