今年の 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 で表示されない … という問題もクリアできます。