使用gulp-iconfont時無法獲取字形代碼

Question

我正在嘗試使用gulp-iconfont從一組svg圖像構建圖標字體。

我已經創建了我的gulp任務，當我運行它時沒有錯誤。 但我也無法獲得每個圖標的代碼，這就是我需要使用css pseudoelements上的圖標。

控制台輸出顯示unicode應該是的奇怪字符：

這是我的gulp任務：

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看到它，例如uEA02-calendar.svg 。

但是，如果我嘗試在我的css文件中使用它：

.calendar:before {
  content: "uEA02";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: "icon-font"; }

我看到的是文字uEA02而不是我的圖標。 我已經檢查過了，字體正在加載，我不知道我在這里可以找到什么？

Answer 1

我通常將gulp-iconfont與gulp-iconfont-css配對。 此附加包導出樣式表，其中包含綁定到類的相應實體。 您可以導出預處理的CSS或香草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;

Answer 2

您只需要使用反斜杠（ \\ ）轉義unicode字符串。 在你的CSS中寫道：

.calendar:before {
  content: "\EA02";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: "icon-font";
}

Answer 3

您需要從傳遞給“on glyphs”事件的函數中重新格式化unicode。 否則unicode將在模板中丟失。

我建議這樣的事情：

.on('glyphs', function(glyphs, options) {
    glyphs = glyphs.map((glyph) => {
        ...glyph,
        unicode: glyph.unicode[0].codePointAt(0).toString(16).toUpperCase()
    });
    console.log(glyphs, options);
})

不能歸功於這個解決方案 - 在這篇文章中找到答案