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


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , | 閲覧数:1,784 | 1 comment

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

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , | 閲覧数:1,784 | 1 comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

  • とおく

One Comment

  1. Pingback: ウェブ制作やSEOも解決!アイコンWebフォントLigature SymbolsはLINE・はてブも使えるよ - ゆめぴょんの知恵

Leave a Reply

Required fields are marked *


CAPTCHA