Can't get the glyph code when using gulp-iconfont

Question

I'm trying to use gulp-iconfont to build an icon font from a set of svg images.

I've created my gulp task and there're no errors when I run it. But neither can I get the code for each icon, which is what I need to use the icons on css pseudoelements.

The console output shows strange characters where the unicode is supposed to be:

Here's my gulp task:

gulp.task('iconfont', function(){
    gulp.src(['assets/icons/*.svg'])
        .pipe(iconfont({
            fontName: 'icon-font', // required
            appendUnicode: true, // recommended option
            normalize: true,
            centerHorizontally: true,
            fontHeight: 100,
            formats: ['ttf', 'eot', 'woff'], 
        }))
        .on('glyphs', function(glyphs, options) {
            console.log(glyphs, options);
      })
    .pipe(gulp.dest('assets/fonts/'));
});

As the appendUnicode option is set to true, I can see it at the beggining of my svg file name, for example uEA02-calendar.svg .

However, if I try to use it on my css file:

.calendar:before {
  content: "uEA02";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: "icon-font"; }

what I see is the text uEA02 instead of my icon. I've checked and the font is loading, I don't know what could I be missing here?

Answer 1

I usually pair gulp-iconfont with gulp-iconfont-css. This additional package exports a stylesheet with the appropriate entities binded to a class. You can export pre-processed css or vanilla css.

Here's my gulp task.

    var iconfont = require('gulp-iconfont');
    var iconfontCss = require('gulp-iconfont-css');

    var glyphFontName = 'icon';

    var stream = gulp.src('resources/assets/glyph/*.svg')
        .pipe(iconfontCss({
            fontName: glyphFontName,
            path: 'node_modules/gulp-iconfont-css/templates/_icons.scss',
            targetPath: '../../resources/sass/generated/' + glyphFontName + '.scss',
            fontPath: '../fonts/',
            cssClass: 'i',
            centerHorizontally: true
        }))
        .pipe(iconfont({
            fontName: glyphFontName,
            formats: [
                'ttf',
                'eot',
                'woff',
                'woff2'
            ],
        }))
        .pipe(gulp.dest('public/fonts/'));

    return stream;

Answer 2

You simply need to escape the unicode string with a backslash ( \\ ). In your CSS just write:

.calendar:before {
  content: "\EA02";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: "icon-font";
}

Answer 3

You need to reformat the unicode from within the function you're passing to the "on glyphs" event. Otherwise the unicode will be lost in templating.

I'd suggest something like this:

.on('glyphs', function(glyphs, options) {
    glyphs = glyphs.map((glyph) => {
        ...glyph,
        unicode: glyph.unicode[0].codePointAt(0).toString(16).toUpperCase()
    });
    console.log(glyphs, options);
})

Can't take credit for this solution - found the answer in this post