Font symbols don't display correctly with css generated from gulp-iconfont

Question

So, I'm using gulp-iconfont to generate icon font from svg icons. I've set up task in a next way:

gulp.task('iconfont', function(){
  gulp.src(['src/assets/icons/*.svg'])
    .pipe($.iconfont({
      fontName: 'material',
      normalize: true
    }))
    .on('codepoints', function(codepoints) {
      console.log(codepoints);
      gulp.src('src/templates/material.styl')
        .pipe($.consolidate('mustache', {
          glyphs: codepoints,
          fontName: 'material',
          fontPath: '../fonts/',
          className: 'md'
        }))
        .pipe(gulp.dest('src/styles/plugins'));
    })
    .pipe(gulp.dest('build/fonts/'));
});

console.log(codepoints) gives me something like:

[ { name: 'notifications', codepoint: 57345 },
  { name: 'offline', codepoint: 57346 },
  { name: 'online', codepoint: 57347 },
...
]

I'm using this codepoints in my css to generate something like:

.md-notifications {
  content: "\57345";
}

And it doesn't work, there is an empty space instead of my icon. But if I use the codepoint that I get directly from generated svg font it works:

.md-notifications {
  content: "\E001"
}

What am I doing wrong?

`gulp.src('src/templates/material.styl')` = typo? `styl` => `style` — odedta, May 31 '15 at 12:19
Make sure you set the element's font to that Gulp font thing. — odedta, May 31 '15 at 12:19
@odedta no it is not. I use stylus and want generated stylesheet file to be a stylus too. And yep, I do add this font to my element. My problem is definitely refers to the fact that codepoints given by gulp-iconfont incorrect, cause if I change them everything works fine — Boris Zagoruiko, May 31 '15 at 13:03

score 2 · Accepted Answer · edited May 31 '15 at 22:58

In JavaScript, when you have a backslash followed by digits, you are creating an octal escape sequence. The number after the slash needs to be in base 8 (octal).

The codepoint 57345 should be given as "\160001".

You can also do hex escape sequence by using the "\u" prefix. So 57345 can also be given as "\uE001".

The second one you claim is working "\E001" is not right. And won't be doing what you think it does. It should just be producing the string "E001".

Font symbols don't display correctly with css generated from gulp-iconfont

1 Answers1