我尝试使用gulp-iconfont从一组svg图像构建图标字体。
我已经创建了我的gulp任务,并且在运行它时没有错误。但我也无法获得每个图标的代码,这就是我需要使用css pseudoelements上的图标。
控制台输出显示unicode应该是的奇怪字符:
这是我的一项任务:
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/'));
});
由于appendUnicode
选项设置为true,我可以在svg文件名的开头看到它,例如uEA02-calendar.svg
。
但是,如果我尝试在我的css文件中使用它:
.calendar:before {
content: "uEA02";
speak: none;
font-style: normal;
font-weight: normal;
font-family: "icon-font"; }
我看到的是文字uEA02而不是我的图标。我已经检查过并且字体正在加载,我不知道我在这里可以找到什么?
答案 0 :(得分:0)
我通常将gulp-iconfont与gulp-iconfont-css配对。此附加包导出样式表,其中包含绑定到类的相应实体。您可以导出预处理的css或vanilla css。
这是我的gulp任务。
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;
答案 1 :(得分:0)
您只需要使用反斜杠(\
)转义unicode字符串。
在你的CSS中写一下:
.calendar:before {
content: "\EA02";
speak: none;
font-style: normal;
font-weight: normal;
font-family: "icon-font";
}
答案 2 :(得分:0)
您需要在传递给“字形”事件的函数中重新格式化unicode。否则,unicode将在模板中丢失。
我建议这样的事情:
Route::delete('/delete', [
'uses'=>'ContactController@delete',
'as'=>'contacts.delete'
]);
无法为这种解决方案效劳-在this post
中找到了答案