Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Create a new folder and name it whatever you would like.

  2. 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/)

  3. Then install grunt-webfont from https://github.com/sapegin/grunt-webfont. Install the node engine version without fontforge:
    npm install grunt-webfont --save-dev

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

    Code Block
    languagejs
    titleGruntfile.js
    linenumberstrue
    module.exports = function(grunt) {
    
    // Project configuration.
     grunt.initConfig({
        pkg: grunt.file.readJSON('"package.json'"),
             webfont: {
                icons: {
                    src: '"icons/*.svg'", // Your local path where the svg files are located.
                    dest: '"src/fonts/'", // Destination path for the font files.
                    destCss: '"src/css/'",
                    options: {
                    	engine: '"node'", // To use the node engine.
                        fontHeight: 52, // Avoid encountering metric-related issues.
                        normalize: false,
                        ascent: 64, // Top height measured from the bottom of the glyph boundary.
                        descent: 0, // Bottom height measured from the bottom of the glyph boundary.
                        font: '"icons'", // Name of the font.
                        destHtml: '"assets/'",
                        templateOptions: {
                            classPrefix: '"icon-'"
                        }
                    }
                }
            }
    });
    
        // Load the plugin that provides the “uglify”"webfont" task.
        grunt.loadNpmTasks('"grunt-webfont'");
    
        // Default task(s).
        grunt.registerTask('"default'", ['"webfont'"]);
    
    };


  5. Run "grunt".

  6. In the folder you created, the following tree structure will appear:



  7. In src > fonts, you will find your icon font file. In icons you will find your .svg icons. The assets folder will contain an icons.html file that will preview the icon font.

...