自定义图标字体未加载

使用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"; }

来源

2014-10-18 Vinz243

你验证路径的字体是正确的？或者生成的CSS有效？ – cimmanon 2014-10-18 18:43:53

这是生成的CSS文件https://gist.github.com/vinz243/7f793f97d359bc8e4152没有任何404或任何字体的请求（除roboto外） – Vinz243 2014-10-18 19:44:18

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

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

来源

2014-10-19 02:48:13

谢谢你是这样的解决方案。我发布了答案，但有人删除了它：/ – Vinz243 2014-10-19 07:36:12

我错误地删除了._。我仍然会接受你的帖子;） – Vinz243 2014-10-19 08:31:57

同样的图标出现了几次的问题，是因为这些图标在材质设计图标中多次出现大小不一的图标。 – Vinz243 2014-10-19 08:39:48

我忘了申请类icon ._。

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

来源

2014-10-18 20:29:29 Vinz243

而不是使用两个类有你的图标的工作，你可以改变要在与icon-开头的所有CSS类添加您的FONT-FAMILY。

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

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

这里是变化，使：

[class^="icon-"]:before, [class*=" icon-"]:before { 
    font-family: "material-design"; 
}

来源

2014-10-19 10:00:28

自定义图标字体未加载

回答

相关问题