使用gulp-iconfont生成的CSS不能正确显示字体符号

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?

Answer 1

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\u0026quot; prefix. So 57345 can also be given as "\".

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".