
<!doctype html>
<html>
    <head>
        <title>Test file</title>
    </head>
    <body>
        <i class="fontelico icon-emo-happy"></i>
        <i class="fontelico icon-spin6"></i>
        <i class="fontawesome icon-facebook"></i>
        <i class="fontawesome icon-gplus"></i>
        <i class="entypo icon-user-add"></i>
        <i class="entypo icon-chat"></i>
        <i class="typicons icon-th-large-outline"></i>
        <i class="iconic icon-mail"></i>
        <i class="iconic icon-list"></i>
    </body>
</html>

In your gulpfile.js, add the task:


var gulp = require('gulp')
  , rename = require('gulp-rename')
  , fontelloConfig = require('gulp-fontello-config');

gulp.task('generate-fontello-fonts', function() {
    gulp.src('test/src/index.html')
        .pipe(fontelloConfig())
        .pipe(rename('config.json'))
        .pipe(gulp.dest('build'));
});

// Gulp Default Task
gulp.task('default', ['generate-fontello-fonts']);

See build for output.

Use the fontello-cli package to download your fonts.


var gulp = require('gulp')
  , rename = require('gulp-rename')
  , fontelloConfig = require('gulp-fontello-config')
  , exec = require('child_process').exec;

gulp.task('generate-fontello-fonts', function() {
    gulp.src('test/src/index.html')
        .pipe(fontelloConfig())
        .pipe(rename('config.json'))
        .pipe(gulp.dest('build'));
});

exec('fontello-cli install --config ./build/config.json --css ./test/src/assets/css --font ./test/src/assets/font');

// Gulp Default Task
gulp.task('default', ['generate-fontello-fonts']);

See test/src/assets for output.

Now you can add the tag link in your HTML by using gulp-inject-string:


var gulp = require('gulp'),
    inject = require('gulp-inject-string');

gulp.task('inject:after', function(){
    gulp.src('test/src/index.html')
        .pipe(inject.after('</title>', '\n<link rel="stylesheet" href="assets/css/fontello.css">\n'))
        .pipe(gulp.dest('build'));
});

Using options

You can use aliases to simplify your HTML code. For example, instead to use fontawesome icon-facebook, you can use fa icon-facebook.


<html>
  <head>
    <title>Test file with alias and prefix</title>
  </head>
  <body>
    <i class="fa fa-home"></i>
    <i class="fa fa-book"></i>
    <i class="fa fa-pencil"></i>
    <i class="fa fa-cog"></i>
  </body>
</html>

In your gulpfile.js:


var gulp = require('gulp')
  , rename = require('gulp-rename')
  , fontelloConfig = require('gulp-fontello-config');

var options = {
       name: 'fontello',        // The font name. Will be used as file name
       prefix: 'fa-',           // The default css prefix
       suffix: false,           // The css suffix
       hinting: 1000,
       units: 1000,             // Units per em
       ascent: 85,
       alias: {                 // Alias to use for parsing
          fontawesome: 'fa',
          fontelico: 'fo',
          entypo: 'en'
       },
       packs: ['meteocons'],    // Use this option to add all glyphs in the 
                                // fonts pack meteocons for example
       done: function(config) { // The callback function
            // you can change config object here
            // config.glyphs contains glyphs
       }
    };

gulp.task('generate-fontello-fonts', function() {
    gulp.src('test/src/alias-with-prefix.html')
        .pipe(fontelloConfig(options))
        .pipe(rename('config.json'))
        .pipe(gulp.dest('build'));
});

Keywords

gulpplugin

fontello

fonts

FAQs

What is gulp-fontello-config?

Is gulp-fontello-config popular?

Is gulp-fontello-config well maintained?

Package last updated on 21 Feb 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install