从 gulp-iconfont 生成的 css 无法正确显示字体符号答案

【问题标题】：Font symbols don't display correctly with css generated from gulp-iconfont从 gulp-iconfont 生成的 css 无法正确显示字体符号
【发布时间】：2015-05-31 11:56:53
【问题描述】：

所以，我使用gulp-iconfont 从 svg 图标生成图标字体。我已经通过下一个方式设置了任务：

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) 给了我类似的东西：

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

我在我的 css 中使用这个代码点来生成类似的东西：

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

而且它不起作用，有一个空白区域而不是我的图标。但是，如果我使用直接从生成的 svg 字体获得的代码点，它就可以工作：

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

我做错了什么？

【问题讨论】：

gulp.src('src/templates/material.styl') = 错字？ styl => style
确保将元素的字体设置为 Gulp 字体。
@odedta 不，不是。我使用手写笔并希望生成的样式表文件也成为手写笔。是的，我确实将此字体添加到我的元素中。我的问题肯定是指 gulp-iconfont 给出的代码点不正确，因为如果我更改它们一切正常

标签： javascript css svg gulp icon-fonts

【解决方案1】：

在 JavaScript 中，当您有一个反斜杠后跟数字时，您正在创建一个八进制转义序列。斜线后面的数字需要以 8 为基数（八进制）。

代码点 57345 应为“\160001”。

您还可以使用“\u”前缀进行十六进制转义序列。所以57345也可以写成“\uE001”。

您声称正在工作的第二个“\E001”不正确。并且不会做你认为的那样。它应该只是产生字符串“E001”。

【讨论】：