0

使用 gulp-iconfont-css，我正在尝试将 Material Design svg 编译成字体。这是我的 Gulpfile.js 的一部分：

gulp.task('iconfont', function(){
  gulp.src(paths.svg)
    .pipe(iconfontCss({
      fontName: 'material-design', // required
      path: './www/sass/templates/_icons.scss',
      targetPath: '../sass/_icons.scss',
      fontPath: '/fonts/'
    })).pipe(iconfont({
      fontName: 'material-design', // required
    }))
    .pipe(gulp.dest('./www/fonts/'));
});

现在我的模板：

@font-face {
    font-family: "<%= fontName %>";
    src: url('<%= fontPath %><%= fontName %>.eot');
    src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
        url('<%= fontPath %><%= fontName %>.woff') format('woff'),
        url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
        url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
}

.icon:before {
    font-family: "<%= fontName %>";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
    text-decoration: none;
    text-transform: none;
}

<% _.each(glyphs, function(glyph) { %>
<% var array = glyph.fileName.split('_') %>
.icon-<%= array.slice(1, array.length - 1).join('-') %>:before {
    content: "\<%= glyph.codePoint %>";
}
<% }); %>

问题：我的图标未加载当我创建这样的元素时：

 <i class="icon-send"></i>

我什么也没看见。并且字体永远不会下载到服务器上（在网络日志中）。此外，图标用不同的值定义了两次。提炼：

@font-face {
  font-family: "material-design";
  src: url('/fonts/material-design.eot');
  src: url('/fonts/material-design.eot?#iefix') format('eot'), url('/fonts/material-design.woff') format('woff'), url('/fonts/material-design.ttf') format('truetype'), url('/fonts/material-design.svg#material-design') format('svg'); }

.icon:before {
  font-family: "material-design";
  ...
  text-transform: none; }

.icon-3d-rotation:before {
  content: "\E001"; }

.icon-3d-rotation:before {
  content: "\E002"; }

.icon-accessibility:before {
  content: "\E003"; }

.icon-accessibility:before {
  content: "\E004"; }
4

3 回答 3

2

可能是因为没有设置字体吗？font-family 在“icon”类中定义，但您没有指定。如果您改用以下内容会发生什么？

<i class="icon icon-send"></i>
于 2014-10-19T02:48:13.647 回答
1

您可以更改字体系列以添加到所有以icon-.

然后你只需要做这样的事情：

<i class="icon-send"></i>

这是要进行的更改：

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "material-design";
}
于 2014-10-19T10:00:28.493 回答
0

我忘了申请课程icon._。

 <i class="icon icon-reply"></i>
于 2014-10-18T20:29:29.940 回答