IEへの対応が抜けていました、、アイコンフォントをIEでも表示させるために追加したCSS

Internet Explorer

なんてことでしょう!

自分がインターネットエクスプローラーを使わないとはいえ、仕事だったらこんなミスは・・・っていうか、手抜きはしないと思うけど。

IE(インターネットエクスプローラー)でのアイコンフォント(合字)の対応が抜けてたーーー!

ふと、何の気なしに立ち上げたIE・・・

きっと、虫の知らせだね。

ただし、IE9以下では(WindowsXPの方はほとんどIE9以下でしょう)、下図の様に表示されてしまいます。
もし、IE10以上なのに、ご覧のページでページ上に「home」とか「twitter」とか、文字がそのまま表示されていらっしゃる方(下図の様に)は、ページを更新なさるか、キーボードのF5(ファンクション5)を押してくださいませ。IE9以下の場合

もし、IEをアップデートできる場合はアップデートしたほうがセキュリティ上も良いと思いますよ!
Internet Explorer 10 のダウンロード – Microsoft Windows

追加のCSS

以下の部分が抜けていたので、っていうか、配布元のCSSをそのまんま使っていて確認を怠っていました、反省。

以下が完成CSSです。
参考:アイコンフォントのデメリットを解決する「Ligature Symbols」を使ってみた。 | Oh-Blog

アイコンフォントでページの重さを解消

IE10以上なら、上図の様に表示されるはず。

参考サイト

フォントの機能を使えるCSS3のFont feature settingsとは
font-feature-settingsプロパティ – CSS3
アイコンフォントのデメリットを解決する「Ligature Symbols」を使ってみた。 | Oh-Blog

One comment Add yours

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA