仮想通貨を始めたい方はこちらから Check

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

こまり

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

みすけ

それなら考えられる原因は2つだね。何が原因でどうすれば解決するか解説するね!

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

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

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

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

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

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

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

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

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

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で表示できるアイコンとできないアイコンがあった場合、考えられる原因は以下のどちらかです。どちらに該当するかを確認して対策していきましょう。

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

More

皆様の助けになる情報を幅広く提供していきたいと考えています。
助っ人のテーマパークを目指すということでスケットランドです。

年齢・・・30代
性別・・・男
家族・・・妻と2人の娘の4人家族
仕事・・・会社員
趣味・・・音楽(楽器演奏&ライブ参戦)
家 ・・・都内の田舎の戸建

コメント

コメントする

目次