自定義圖標字體未加載

使用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

自定義圖標字體未加載

回答

相關問題