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

Font Awesomeは便利で可愛いアイコンがたくさんあるので愛用している方も多いサービスです。

普段何気なく使っていると、「正常に表示できるアイコン」と「表示できないアイコン」があって困ることってありませんか？もし、ブログをWordpressのCocoonを使用して書いている場合は2つの原因が考えられます。

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

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

WordPressのブログテーマとしてCocoonを利用されている方で、FontAwesomeが表示されたりされなかったりする問題に遭遇する場合があります。この原因は次の2つしかありません。

どちらが原因で発生しているかを突き止め、対策していきましょう。

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から探してください。

Free以外のアイコンを選択している

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

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

2. まとめ

Cocoonを使っていてFont Awesomeで表示できるアイコンとできないアイコンがあった場合、考えられる原因は以下のどちらかです。どちらに該当するかを確認して対策していきましょう。

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