【WordPress】パソコンで見るとFont Awesomeが□になる問題【解決済】

wordpress

とっちゃん@nyanco! です。

WordPressでパソコンで見るとFont Awesomeが□になる問題【解決済】の備忘録です。

ワードプレスで地味に困った現象に悩まされておりましたが、あっけなく解決しました。

ちなみにテーマはCocoon(コクーン)ですが、他のテーマでも共通だと思います。

スポンサーリンク

Font Awesomeが特定の環境でのみ□になる

悩まされていたのは、Font-AwesomeのフォントがiPhoneでは普通に表示されるのに、パソコンでは「□」になるという現象です。

▼「□」というのはこれです!

特に致命的ではないのでしばらく放置してたんですが、やはりだんだんと気になってきて「なんとかしよう」と思い調べてみると即解決しました!

必要最低限のフォント指定が抜けていた!

とても参考になったサイト様はこちらです。

私の場合、font-weightの指定が抜けていたのが原因でした!

(iPhoneでちゃんと表示されていた理由は良くわかりませんが…)

上記のようにCSSに「font-weight:900;」と記述するとパソコンで見ても無事に表示されるようになりました!

Font Awesomeのフリー版だとfont-weightは900(太い)400(細い)の2択となります。さらに細かく言うと、アイコンの種類(Solidは900、Brandsは400)によってフォントの太さは限定されています。フリー版なのでこの程度の制限は仕方ないですね。

おわりに

あっけなく解決して拍子抜けでしたが、自力ではなかなかたどり着けない解決策でした。

テーマがCocoon以外の方でも恐らく当てはまると思うので、Font Awesomeが表示されない!という方の参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

コメント