IE11でFont Awesomeが表示されない問題の対処法

この記事をシェアする

  • ツイッターでシェアする
  • facebookでシェアする
  • google+でシェアする
  • はてぶにブックマークする
IE11でFont Awesomeが表示されない問題の対処法

こんにちは、まりもです。
仕事でクライアントの要望で久しぶりにIE9対応してます。言い訳で「レガシーブラウザ」とか「プログレッシブ・エンハンスメント」とか言って相手を困惑させる作戦をとりつつ。
で、いつも使ってるアイコンwebフォント「Font Awesome」がIE11で表示されませんでした。モダンブラウザのくせになぜだ・・・。いつまでたってもIEはクソだな。
いろいろ試してたら、原因と対処法がわりました。

原因は"https"だった!

そう、原因はhttpsだった。


いつの間にかFont AwesomeのGet Startedに書いてある
 

1. Paste the following code into the <head> section of your site's HTML. 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


のコードがhttpsになってたのは知ってて、Googleもhttpsを推奨しはじめたからそういう流れだなーと思って使ってたんだけど、どうやらIEさんは読み込んでくれないらしい。メンドクサ・・・
というわけで、sを取ったら普通に表示されました。

IE10やIE9でも表示されない場合はこれが原因かもしれないので試してみてください。