【Cocoon】Font Awesomeが表示されない原因と対策方法

ブログトラブル実例
こまり
こまり

可愛いアイコンをFont Awesomeで表示したいんだけど、表示できるアイコンとできないアイコンがあるのよね・・・。

みすけ
みすけ

もしかして、WordpressテンプレートはCocoonを使ってる?

こまり
こまり

Cocoonを使ってるわ。

みすけ
みすけ

であれば、考えられる原因は2つだね。何が原因か解説してあげよう!

Font Awesomeは便利で可愛いアイコンがたくさんあるので愛用している方も多いと思います。普段何気なく使っていると、正常に表示できるアイコンと表示できないアイコンがあって困ることってありませんか?もし、ブログをWordPressのCocoonを使用して書いている場合は2つの原因が考えられます

今回は、Cocoonを使用していたFont Awesomeが表示されない原因と対策についてお伝えします。

この記事はこんな方におすすめ
  • Cocoonを使っていてFont Awesomeが表示されなくて困っている方
  • CocoonでFont Awesomeが表示されない原因と対策方法を知りたい方
スポンサーリンク

1. 【Cocoon】Font Awesomeが表示されない原因と対策方法

【Cocoon】Font Awesomeが表示されない原因と対策方法

WordPressのブログテーマとしてCocoonを利用されている方で、FontAwesomeが表示されたりされなかったりする問題に遭遇した場合はどのように対処すればいいのでしょうか。原因は次の2つしかありません。どちらが原因で発生しているかを突き止め、対策していきましょう。

  • Font Awesomeのバージョン5以降に追加されたアイコンを選択している。
  • Free以外のアイコンを選択している。

1-1. Font Awesomeのバージョンが5以上で追加されたアイコンを選択している

CocoonでFontAwesomeが表示されない1つ目の原因はFont Awesomeのバージョンが5以上で追加されたアイコンを選択していることです。

普段Cocoonを使っている方は、CSSに何も特殊なコードを追加しなくてもHTMLにFont Awesomeのコードを記載するだけでアイコンが表示されていることに気が付いていますか?

これって、CocoonのデフォルトにFont Awesomeを呼び出すためのコードが記入してあるからなんです。そして、そのコードはFont Awesomeのバージョン4にしか対応していません。2019年11月の時点で最新のFont Awesomeはバージョンが5.11.2になっているため、新しく追加されたアイコンはCocoonのデフォルト状態では呼び出すことができません。

わたしはこのことに気づくのにかなり時間がかかってしまいました。

対策方法としては、バージョン4で使えるアイコンを選択することです。Font Awesome iconで検索すると最新のページが表示されるので、どのアイコンがバージョン4で使えるのかわかりません。

バージョン4で使えるアイコンを探すにはFont Awesome icon Ver.4で検索して表示されるページから選択するか、Font Awesome 4から探してください

1-2. Free以外のアイコンを選択している

これはCocoon特有のことではありませんが、Font Awesomeには無料で使えるアイコンと有料でしか使えないアイコンがあります。表示されない原因として、Freeではないアイコンを選択していることが考えられます。

Font Awesomeのアイコンには無償で使用できるものと有償でしか使用できないものがあります。月額料金を払っている方は問題ありませんが、そうではない場合はFreeタイプのアイコンを選択しているか確認してみてください。

2. まとめ

Cocoonを使っていてFont Awesomeで表示できるアイコンとできないアイコンがあった場合、考えられる原因は、

  • Font Awesomeのバージョン5以降に追加されたアイコンを選択している。
  • Free以外のアイコンを選択している。
のどちらかがです。どちらに該当するか確認して有効な対策をうちましょう。

以上、最後まで読んでいただきありがとうございます。

コメント