Javascript 字体符号不';使用从gulp iconfont生成的css无法正确显示
因此,我使用svg图标生成图标字体。我以下一种方式设置了任务:Javascript 字体符号不';使用从gulp iconfont生成的css无法正确显示,javascript,css,svg,gulp,icon-fonts,Javascript,Css,Svg,Gulp,Icon Fonts,因此,我使用svg图标生成图标字体。我以下一种方式设置了任务: gulp.task('iconfont', function(){ gulp.src(['src/assets/icons/*.svg']) .pipe($.iconfont({ fontName: 'material', normalize: true })) .on('codepoints', function(codepoints) { console.log(c
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(代码点)
为我提供了如下信息:
[ { name: 'notifications', codepoint: 57345 },
{ name: 'offline', codepoint: 57346 },
{ name: 'online', codepoint: 57347 },
...
]
.md-notifications {
content: "\57345";
}
我在css中使用此代码点生成如下内容:
[ { name: 'notifications', codepoint: 57345 },
{ name: 'offline', codepoint: 57346 },
{ name: 'online', codepoint: 57347 },
...
]
.md-notifications {
content: "\57345";
}
而且它不工作,有一个空的空间,而不是我的图标。但是,如果我使用直接从生成的svg字体中获得的代码点,它会起作用:
.md-notifications {
content: "\E001"
}
我做错了什么?在JavaScript中,当您有一个反斜杠后跟数字时,您正在创建一个八进制转义序列。斜杠后面的数字必须以8为基数(八进制) 代码点57345应表示为“\160001” 还可以使用“\u”前缀执行十六进制转义序列。因此,57345也可以表示为“\uE001”
您声称正在工作的第二个“\E001”不正确。不会做你认为它会做的事。它应该只是生成字符串“E001”。
gulp.src('src/templates/material.styl')
=typostyl
=>style
请确保将元素的字体设置为Gulp字体。@odedta不,不是。我使用手写笔并希望生成的样式表文件也是手写笔。是的,我确实在元素中添加了这种字体。我的问题肯定是指gulp iconfont给出的代码点不正确,因为如果我更改它们,一切都正常