未加载自定义图标字体 [英] Custom icon font not loaded
本文介绍了未加载自定义图标字体的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用gulp-iconfont-css,我试图将Material Design svg编译为字体。这是我的Gulpfile.js的一部分:
Using gulp-iconfont-css, I'm trying to compile Material Design svg into a font. This is the part of my 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>
我什么也看不到。并且该字体从不在服务器上(在网络日志中)下载。此外,图标被定义两次,值不同。提取:
I see nothing. And the font is never downloaded on the server (in the network log). Also, the icons are defined two times with different values. Extract:
@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"; }
推荐答案
这可能是因为字体未设置? font-family在icon类中定义,但是你没有指定。
Is it perhaps because the font is not set? The font-family is defined in the "icon" class, but you are not specifying that. What happens if you use the following instead?
<i class="icon icon-send"></i>
这篇关于未加载自定义图标字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文