アイコン表示において、便利なFont-Awesome。
使い方はいろんなブログが解説しているので省きますが、WordPressテーマ「PlaneWhite」において、特定の環境でFont-Awesomeが表示されないというご報告をいただきました。
PlaneWhiteにおいてFont-Awesomeを使用している箇所はヘッダーのFacebook, メール, 電話といったアイコンです。
これは「画像ではなくてフォントファイルとして読み込んでいる」箇所となります。
画像ではないので大きさも色も自由、スマホの高解像度にも対応、と便利なんですね。
しかし、特定の環境下で表示できないとのご連絡をいただきました。
特定のサーバーとブラウザで不具合
・Windows
・Hetemlサーバー
・chrome / Firefox / IE
確認した限りですが、上記の組み合わせでfont-awesomeが非表示、もしくは文字化け？として正常に確認できませんでした。
このようになってしまいます。
これでは困るので、原因を調べてみたところ「CORS（Cross-Origin Resource Sharing）」というのが問題でした。
簡単に言うとCORSとは「異なるサーバ間でデータをやりとりする仕組み」です。詳しい解説はこちらをどうぞ。
このサーバーはさくらサーバーを使用しておりテストサイト構築の際はエラーは起きていませんでしたが、Hetemlサーバーを確認したらばっちり拒否されていました。
CDNを参照して解決
サーバーにダウンロードしたfont-awesomeのcssファイルを参照する際に、CDNを参照すれば解決できました。
以前は以下のようにダウンロードしたCSSを参照していましたが
これを、Bootstrapが提供している指定の参照ファイルへ直接参照します。
FontAwesomeのサイトに方法が書いています。使い勝手を考えてダウンロード方式にしましたが、CORSの問題があるのでこれからは参照方式にすることにします。
Get Started with Font Awesome
※新しいバージョンだとCDNのサーバーが別のようですが、どちらでも大丈夫でしょう
しかし不思議なのはMacで確認したところ問題が起きなかったという点。。。
ちょっと疑問に残るところです。
