使用gulp-iconfont时无法获取字形代码

时间:2015-10-23 07:37:19

标签: css svg gulp

我尝试使用gulp-iconfont从一组svg图像构建图标字体。

我已经创建了我的gulp任务,并且在运行它时没有错误。但我也无法获得每个图标的代码,这就是我需要使用css pseudoelements上的图标。

控制台输出显示unicode应该是的奇怪字符:

gulp-iconfont output

这是我的一项任务:

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而不是我的图标。我已经检查过并且字体正在加载,我不知道我在这里可以找到什么?

3 个答案:

答案 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

中找到了答案