Generating Icon fonts with Gulp

Victoria Mineva
04-02-2018

When working on a website where a lot of icons are used it becomes inconvenient to keep image files for all those different icons. All the separate files will require additional http requests and the images will add file weight. Sometimes they also won’t scale properly. A solution for that can be to generate an icon font for all your icons in one file.

Some of the advantages of an icon font are that the icons scale really well, their color and opacity can be changed easily, they can be rotated with CSS and you can even add shadows to them. In this tutorial I will show you how to use Gulp to generate an Icon font. For the icons I will use SVG images, you can find such icons on the internet or even create your own.

Creating the Gulpfile

In order to generate our icon font with Gulp first we will need to install two plugins: gulp-iconfont and gulp-iconfont-css.

Gulp-iconfont will generate your icon font and then gulp-iconfont-css will create the CSS/SASS/LESS file that you need in order to use your icons.

We can install the plugins and add them as dependencies with the following commands in the terminal:

npm install --save-dev gulp-iconfont

and

npm install --save-dev gulp-iconfont-css

Now we have to add the dependencies to our Gulpfile and create the tasks. Here is what the Gulpfile will look like:

'use strict';

var gulp = require('gulp');
var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');
var runTimestamp = Math.round(Date.now()/1000);
 
var fontName = 'Icons'; 

gulp.task('iconfont', function(){
  return gulp.src(['app/assets/icons/*.svg']) // Source folder containing the SVG images
    .pipe(iconfontCss({
      fontName: fontName, // The name that the generated font will have
      path: 'app/assets/scss/templates/_icons.scss', // The path to the template that will be used to create the SASS/LESS/CSS file
      targetPath: '../../scss/partials/_icons.scss', // The path where the file will be generated
      fontPath: '../../assets/fonts/icons/' // The path to the icon font file
    }))
    .pipe(iconfont({
      prependUnicode: false, // Recommended option 
      fontName: fontName, // Name of the font
      formats: ['ttf', 'eot', 'woff'], // The font file formats that will be created
      normalize: true,
      timestamp: runTimestamp // Recommended to get consistent builds when watching files
    }))
    .pipe(gulp.dest('app/assets/fonts/icons/'));
});

With the task we just created not only the icon font file will be created but also a SASS file will be generated from a template. Our SASS file will import the font file and will have generated classes that we can use to display each icon in our HTML.

Adding a CSS/SASS/LESS template

In order to be able to use our icons we need to generate a CSS file. For that we can use a template. You can download SASS/LESS/CSS templates that you can use on the gulp-iconfont-css github page.

Add that template to our template folder in app/assets/scss/templates and call it _icons.scss.

Adding the SVG icons

The final step before we can generate our icon font is to add some SVG icons in the app/assets/icons folder.

Running our Gulp task

Finally everything is ready for us to run our Gulp task and generate our icon font. In the terminal run gulp iconfont. That will result in a .eot, .ttf and a .woff font files appearing in your app/assets/fonts/icons folder.
In addition to that an _icons.scss file will be generated in your app/assets/scss/partials folder. In that file you can see that you have a class for each icon from the font that looks something like this:

.icon-confused {
    @include icon(confused);
}

Now by using this class in your HTML you can display the icon like so:

<span class="icon-confused"></span>

And here is what the final result looks like of my icons being displayed on a page:

LEAVE A REPLY

1 Comment

  • Carlos Aguilera says:

    Hello, I am adding two icons but it generates me only when there is one, can you help me?

you might also like