How to make Font Awesome compiled when using Grunt Build

In this sort tutorial, I would like to address the common issue when you are using Yeoman as your scaffolding tool to generate simple web app, which include Bootstrap, SASS and Modernizr. The issue is when you add Font Awesome package through bower to overcome the limitation of Glyphicons which is included in the Bootstrap. Font Awesome may work perfectly when they are generated into .tmp directory when you are in the development stage. However when you then build it, you might find that it is not generated into dist directory. That’s what I found disturbing.

Here is a Naive solution to make it works perfectly like in the development stage. This way will need you to edit three files: _variable.scss file of Font Awesome scss, main.scss in the app directory and the Gruntfile.js. Without further ado,

  • Firstly, We need to include Font Awesome files when we run grunt build. Just open the Gruntfile.js and find this part of codes,
      // Copies remaining files to places other tasks can use
        copy: {
          dist: {
            files: [{
              expand: true,
              dot: true,
              cwd: '',
              dest: '',
              src: [
                '*.{ico,png,txt}',
                'images/{,*/}*.webp',
                '{,*/}*.html',
                'styles/fonts/{,*/}*.*'
              ]
            }, {
              src: 'node_modules/apache-server-configs/dist/.htaccess',
              dest: '/.htaccess'
            }, {
              expand: true,
              dot: true,
              cwd: '.',
              src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
              dest: ''
            }]
          },
          styles: {
            expand: true,
            dot: true,
            cwd: '/styles',
            dest: '.tmp/styles/',
            src: '{,*/}*.css'
          }
        },
      

    and add this chunk of code after bootstrap font,

        {
          expand: true,
          dot: true,
          cwd: '.',
          src: 'bower_components/font-awesome/fonts/*',
          dest: ''
        }
    

    So it will look like this,

    // Copies remaining files to places other tasks can use
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '',
          dest: '',
          src: [
            '*.{ico,png,txt}',
            'images/{,*/}*.webp',
            '{,*/}*.html',
            'styles/fonts/{,*/}*.*'
          ]
        }, {
          src: 'node_modules/apache-server-configs/dist/.htaccess',
          dest: '/.htaccess'
        }, {
          expand: true,
          dot: true,
          cwd: '.',
          src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
          dest: ''
        }, {
          expand: true,
          dot: true,
          cwd: '.',
          src: 'bower_components/font-awesome/fonts/*',
          dest: ''
        }]
      },
      styles: {
        expand: true,
        dot: true,
        cwd: '/styles',
        dest: '.tmp/styles/',
        src: '{,*/}*.css'
      }
    },
    


    This step will ensure Grunt to copy Font Awesome files into dist directory when we run grunt build.

  • Next step let’s add a line of code into main.scss in the app/styles directory.

    Add this line of code after //endbower line,

    @import "font-awesome/scss/font-awesome.scss";
    

    So it looks like this,

    $icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
    // bower:scss
    @import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
    // endbower
    @import "font-awesome/scss/font-awesome.scss";
    


    This one will make sure Font Awesome scss file will also added generated when we run grunt build.

  • Lastly to glue those previous steps , let’s open the _variable.scss in the bower_components/font-awesome/scss/ directory and change the path where it will find the fonts.

    Change this line,

    $fa-font-path:         "../fonts" !default;
    

    into

    $fa-font-path:        "../bower_components/font-awesome/fonts" !default;
    


    This step will make sure the css file refer to fonts files.

That’s all, I call this naive because I’m not sure yet this solution is elegant and efficient enough. However it works for me and so for you too.

Advertisements

One thought on “How to make Font Awesome compiled when using Grunt Build

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s