사용자 정의 아이콘 글꼴이로드되지 않았습니다

Question

gulp-iconfont-css를 사용하여 Material Design svg를 글꼴로 컴파일하려고합니다.

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 %>"; 
} 
<% }); %> 

문제 : 이것은 내 Gulpfile.js의 일부입니다 나는이 같은 요소를 만들 때 내 아이콘로드되지 않습니다

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

Answer 1

글꼴이 설정되지 않았기 때문일 수 있습니까? font-family는 "icon"클래스에 정의되어 있지만 지정하지는 않습니다. 대신 다음을 사용하면 어떻게됩니까?

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

Answer 2

내가 클래스 icon를 ._ 적용하는 것을 잊었다.

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

Answer 3

대신 당신의 아이콘 작업이 두 클래스를 사용하여, 당신은 당신의 글꼴 - 가족이 icon-로 시작하는 모든 CSS 클래스에 추가 할 수 변경 될 수 있습니다. 여기

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

가 변경하는 것입니다 :

그럼 당신은 이런 식으로 뭔가를해야 할 것

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