Win (IE) で Font Awesome のアイコンが表示されない時の確認事項

2018.09.20

Font Awesome

今年の 8/28 に Font Awesome のバージョン 5.3.1 がリリースされました。古いバージョンの 4.2 や 4.7 では Windows の IE (Internet Explorer) ブラウザで表示されないなどの問題がありました。古いバージョンから最新バージョンを使う際に気をつけておきたい確認点をご紹介します。これだけ抑えておけば IE ブラウザで表示されない問題も解決できます。

1. 最新バージョンのクラスを使用すること

例えば <i> にクラスを付けて出力する場合、Font Awesome のバージョン 4.2 では白抜きのメールアイコンのクラスは fa fa-envelope-o でしたが、最新バージョンでは far fa-envelope-o のように、fa → far に変更されています。css で使用する場合も最新バージョンのユニコードを使用しましょう。

2. CSS の疑似要素で指定して使用する場合

CSSの疑似要素 (:before, :after) で指定して Font Awesome を使用する場合、古いバージョンでは font-family の指定が以下でしたが、

 font-family: FontAwesome;
/* アイコンの unicode */
 content: '\f015 '; 

最新バージョンでは “Font Awesome 5 Free” と指定しないと IE ではアイコンが表示されません。以下が最新バージョンの記述例です

 font-family: "Font Awesome 5 Free";
 content: '\f015 '; 

3. アイコンごとに適切な font-weight を指定する

これは目から鱗だったのですが、アイコンごとに決められた font-weight を指定しないと上手く表示されません。

この3点さえ抑えておけば Windows の IE で表示されない … という問題もクリアできます。

  • SERVICE

    WEB FACTORY (ウェブ・ファクトリー) は東京を拠点にするWEB/ホームページ制作会社です。国内外のアーティスト、バンド、レーベルなどのオフィシャルサイト、特設サイトを数多く手掛けております。音楽関連のコンテンツ制作は是非ともお任せ下さい!

  • Address

    〒150-0002
    東京都渋谷区渋谷2-7-14 VORT青山 5F

    Phone

    03-5464-3266
    お電話でのお問い合わせ (平日:9:00 〜 18:00)

    Email

    メールでのお問い合わせはこちらから
    webfactory.tokyo