アイコンフォントを使用している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で動作しませんか?
をチェックして、10 *できる* CSS 'フォント-face'をサポートする必要があります。 http://caniuse.com/#feat=fontface * but *、問題は恐らくフォントが 'woff2'ファイルであることです。これはIE(あらゆるバージョン)がサポートしていないようです:http:// caniuse。 com /#feat = woff2(IE 11で動作しますか?) –
はい、私はIE 11で動作すると確信しています。 – user687554
フォントはIEではサポートされていますが、IEバージョン10以降でのみサポートされていますフォントの合字は、合字 'alarm_on'と 'alarm_off'を使用できることを意味します。古いバージョンでは、対応する16進数のエンコーディング&#xE858を使用する必要があります。 &#xE857; – Borre