Page Comparison

...

Part 3: Running Grunt to generate the icon font

Requires Node and Grunt to be installed.
Create a new folder and name it whatever you would like.
Navigate to that folder in Terminal, and install npm. (Notes on how to install for Mac: http://blog.teamtreehouse.com/install-node-js-npm-mac or Windows: http://blog.teamtreehouse.com/install-node-js-npm-windows or Linux: https://nodejs.org/en/download/package-manager/)navigate to it using the command terminal.
Install grunt-webfont. The following instructions assume the node engine is used. The fontforge engine can be used instead but requires it to be installed independently
```
npm install grunt-webfont --save-dev
```
Install Infusion-Icons
```
npm install infusion-icons --save-dev
```

Create a Gruntfile.js file such as the following below:

Code Block

language	js
title	Gruntfile.js
linenumbers	true

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),
        webfont: {
            icons: {
                src: "node_modules/infusion-icons/svg/*.svg", // Path to the Infusion-Icons, may be different if you use a different set of SVGs
                dest: "src/fonts/", // Destination path for the font files.
                destCss: "src/css/",
                options: {
                    engine: "node", // To use the node engine.
                    font: "icons", // Name of the font.
                    destHtml: "assets/",
                    templateOptions: {
                        classPrefix: "icon-"
                    }
                }
            }
        }
    });

    // Load the plugin that provides the "webfont" task.
    grunt.loadNpmTasks("grunt-webfont");

    // Default task.
    grunt.registerTask("default", ["webfont"]);

};

Run "grunt".

From the command line run the Grunt command to build the font.
```
grunt
```

Versions Compared

Old Version 62

New Version Current

Key

Part 3: Running Grunt to generate the icon font