Four Digits: Using a webfont to display icons

Creating the vector images

The vector images you need for the webfont need to be in the svg format. You can use your favorite editor to create or edit them, I'm using Adobe Illustrator in this example.

There is only one thing important when creating the svg files and that is the creation of the “Artboard”. The “Artboard” should be exactly 512x512pt. If your image is not square the “Artboard” should still be 512x512pt. After you set the “Artboard” you scale your image to match the height of the “Artboard” and place the image all the way to the left. If some part of your image falls of (like in the example above) or if you have extra space left on the right that is not a problem. Save the file with a lowercase filename without spaces, for example “services.svg”.

Installing grunt and grunt-webfont

The easiest way to install grunt and grunt-webfont is to create a package.json file in your theme product. This file defines all the dependencies and can be used to install those. Here is the package.json file I used:

{
    "name": "fourdigits.theme",
    "version": "0.0.1",
    "description": "Four Digits Theme",
    "author": "Four Digits",
    "contributors": [{
        "name": "Four Digits",
        "email": "support@fourdigits.nl"
    }],
    "dependencies": {
        "grunt": "~0.4.5",
        "grunt-contrib-less": "~0.11.0",
        "grunt-contrib-watch": "~0.6.1",
        "grunt-contrib-uglify": "~0.6.0",
        "grunt-webfont": "~0.4.8"
    },
    "licenses" : [
        {
            "type" : "GPLv3",
            "url" : "http://www.gnu.org/licenses/gpl-3.0.html"
        }
    ]
}

This file should be in the root of your theme package. When the file is created you can install the packages by running:

npm install

Setting up the Grunt configuration

The Grunt configuration is stored in the Gruntfile.js which should also be in the root of you theme package. The configuration I used is the following:

module.exports = function(grunt) {
  grunt.initConfig({
    webfont: {
      icons: {
        src: 'fourdigits/theme/static/icons/*.svg',
        dest: 'fourdigits/theme/static/fonts',
        destCss: 'fourdigits/theme/static/stylesheets',
        options: {
          font: "icons",
          hashes: false,
          syntax: "bootstrap",
          stylesheet: "less",
          relativeFontPath: "/++theme++fourdigits.theme/fonts",
          htmlDemo: false
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-webfont');

  grunt.registerTask('default', ['webfont']);
};

The “src” should contain the location where all your svg images are stored which you created earlier. The “dest” should contain the location of the destination folder for your font. The “destCss” should contain the location of the destination of your stylesheets. The “font” option specifies the name of the font. The “stylesheet” setting specifies which format of stylesheet you want to use, we use less. The “relativeFontPath” should be used to specify the path of the fonts in your website.

Generate the font and less file

To generate the font and the less file you simply run the following command:

grunt

The output should be something like:

Running "webfont:icons" (webfont) task
Font icons with 22 glyphs created.

Done, without errors.

In the fonts folder the fonts are created in multiple formats. The files generated are:

icons.eot
icons.svg
icons.ttf
icons.woff 

In the stylesheets folder a icons.less file is generated which can be included in your theme or compiled into a css file.

Using the icons

Using the icons from the webfont is really easy. To display an icons simply use the name of the svg file in the classname. For example if your svg icon has the name “services”, the markup should look like this:

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

Since it is a font you can set the color and the size using css, for example:

.icon-services {
 color: #2d9abc;
 font-size: 46px;
} 

Final thought

Using a webfont for your icons has a lot of advantages; the images are fully scalable so they look great on retina devices and you save a lot of bandwidth because the webfont file is a lot smaller than individual images. This solution also works crossbrowser (yes, even IE6 ;)).