If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-fontello --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-fontello');

The "fontello" task

Overview

In your project's Gruntfile, add a section named fontello to the data object passed into grunt.initConfig().

grunt.initConfig({
  fontello: {
    dist: {
      options: {
        config       : 'config.json',
        fonts        : 'output/fonts',
        styles       : 'output/css',
        preprocessor : 'scss',
        force        : true
      }
    }
  }
})

Options

options.config

Type: String Default value: "config.json"

Path to your config.json file. Generate custom font icons here.

options.zip

Type: String Default value: "."

Folder to extract the full archive.

options.fonts

Type: String Default value: "fonts"

Path to extract font files (*.eot, *.woff, *.svg, *.ttf).

options.styles

Type: String Default value: "css"

Path to extract the stylesheets to.

options.preprocessor

Type: String Default value: none

By default the outputted stylesheet will be .css. Changing this to less or scss will change the output to .less or .scss respectively.

options.force

Type: Boolean Default value: false

By default, if the folder specified in options.fonts, options.zip and options.styles do not exist, the task will throw an error. Setting this option to true will create the directory structure specified.

options.exclude

Type: Array Default value: []

An array of names of files which should be excluded. Accepts strings and regular expressions.

options.cssFontPath

Type: String Default value: undefined

An explicit path to where the fonts are relative to the .css/.scss file.

options.prefix

Type: String Default value: fontello

A string representing the prefix of the stylesheets generated by fontello.

Example

Multiple Targets

grunt.initConfig({
  fontello: {
    options: {
      preprocessor : 'scss',
      force        : true
    },
    dist: {
      options: {
          fonts   : 'output/fonts',
          styles  : 'output/css',
      }
    },
    dev: {
      options: {
          config  : 'test/config.json',
          fonts   : 'test/output/fonts',
          styles  : 'test/output/css',
      }
    }
  }
})

grunt.loadNpmTasks('grunt-fontello');
grunt.registerTask('default', ['fontello:dist']);

Exclude files

grunt.initConfig({
  fontello: {
    dist: {
      options: {
        fonts   : 'output/fonts',
        styles  : 'output/css',
        exclude : ['animation.css', 'fontello-ie7-codes.css', 'fontello.eot'],
      }
    }
  }
})

Keywords

FAQs

What is grunt-fontello?

Is grunt-fontello popular?

Is grunt-fontello well maintained?

Last updated on 10 Jan 2020

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket