2016-12-29 12 views
0

アイコンフォントを使用しているWebページがあります。このウェブページはChrome、Firefox、Safariで正常に動作します。それはEdgeとIE 11でうまく動作します。しかし、IE 8,9、および10もサポートする必要があります。私の問題は、IE 8,9、そしておそらく10で、アイコンが表示されないということです。このBootplyの問題を確認できます。この混乱は、私はすべてのエラーが表示されないということである作る何IE 9でレンダリングされないリソース

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> 

<div class="container"> 
    <ul class="list-inline"> 
    <li><a href="#"><span class="material-icons">alarm_on</span></a></li> 
    <li><a href="#"><span class="material-icons">alarm_off</span></a></li>  
    </ul> 
</div> 

:それは、私は次のコードを持っています。私は何が間違っているのか分かりません。また、フォントファイルをhereからローカルにコピーしました。フォントファイルを/resources/fontsというフォルダのアプリに追加しました。自分のアプリケーションのCSSファイルで、私が先頭に以下を追加しました:これはクロム、Firefox、およびSafariで動作しますが

@font-face { 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('/resources/fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */ 
    src: local('/resources/fonts/Material Icons'), 
     local('/resources/fonts/MaterialIcons-Regular'), 
     url(/resources/fonts/MaterialIcons-Regular.woff2) format('woff2'), 
     url(/resources/fonts/MaterialIcons-Regular.woff) format('woff'), 
     url(/resources/fonts/MaterialIcons-Regular.ttf) format('truetype'); 
} 

、それはまだ何が間違っているIE 8または9で動作しませんか?

+1

をチェックして、10 *できる* CSS 'フォント-face'をサポートする必要があります。 http://caniuse.com/#feat=fontface * but *、問題は恐らくフォントが 'woff2'ファイルであることです。これはIE(あらゆるバージョン)がサポートしていないようです:http:// caniuse。 com /#feat = woff2(IE 11で動作しますか?) –

+0

はい、私はIE 11で動作すると確信しています。 – user687554

+0

フォントはIEではサポートされていますが、IEバージョン10以降でのみサポートされていますフォントの合字は、合字 'alarm_on'と 'alarm_off'を使用できることを意味します。古いバージョンでは、対応する16進数のエンコーディング&#xE858を使用する必要があります。 &#xE857; – Borre

答えて

3

IE9以下では別のHTMLを使用する必要があります。材料アイコンのウェブサイトhere for alarm_onhere for alarm_offで見つけることができます。

だから、それは次のようになります。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> 

<div class="container"> 
    <ul class="list-inline"> 
    <li><a href="#"><span class="material-icons">&#xE858;</span></a></li> 
    <li><a href="#"><span class="material-icons">&#xE857;</span></a></li>  
    </ul> 
</div> 
0

フォントはIEでサポートされていますが、唯一のIEのバージョン10を下のために、あなたは、16進数のエンコーディングを使用することができます。

これは例で、IE9では完全に機能しています。詳細については

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> 
 

 
<i class="material-icons">&#xE87C;</i>

<i class="material-icons">&#xE87C;</i>

あなたはIE 9 here

関連する問題