【Cocoon】Font Awesomeアイコンの使い方｜表示されない理由とカスタマイズ

当ブログでは、Cocoonを初期状態からカスタマイズする方法（コピペ可）をまとめています。

WordPressのCocoonテーマでは、Font Awesomeアイコンを使用することができます。

使いたいけど、Font Awesomeアイコンが表示されないよ！

なんか漏れてる手順があるのかな？

初めてFont Awesomeアイコンを使うときは、なかなかアイコンが表示されなくて時間がかかることも。

そこで、この記事ではFont Awesomeアイコンを使う方法と表示させるためのチェック箇所をまとめました。

以下の個所でのFont Awesomeアイコンの設置方法も詳しく説明していますので、手順を見ていきましょう！

ヘッダーメニュー
ボックスメニュー
カテゴリー

この記事でわかること

Font Awesomeアイコンをヘッダー・ボックスメニュー・カテゴリーに使用する手順
Font Awesomeアイコンの色の変え方
（ヘッダーメニュー・ボックスメニュー・カテゴリー）
CSS class（オプション）を表示させる方法

Font Awesomeアイコンとは？
Font Awesomeアイコンを表示させるために気をつけること
Font Awesomeアイコンの使い方
その他のFont AwesomeアイコンのQ&A
まとめ：Font Awesomeアイコンを使いこなしてブログに装飾しよう！

Font Awesomeアイコンとは？

Font Awesomeアイコンは、ブログのメニューに使うことができます。

ヘッダーメニューのアクセントにしたり↓

ボックスメニューのアイコンにしたり↓

カテゴリーのアイコンにしたりできます↓

Font Awesomeアイコンを表示させるために気をつけること

WordPressのCocoonテーマでは、簡単にFont Awesomeアイコンを使用することができます。しかし、手順に漏れがあるとうまく表示されません。

表示されないときは、以下の項目をチェックすれば正しく表示されます。

表示させるためのチェック箇所

Cocoon設定のバージョンを確認する。
Font Awesomeのバージョンを確認する。
無料アイコンを使う。
HTMLやCSSの入力が正しいか確認する。

Font Awesomeアイコンが表示されない場合、原因は複数あるので手順を見ながら原因を解明しましょう。

ひとつずつチェックしていこう！

Font Awesomeアイコンの使い方

Font Awesomeアイコン使い方の手順を説明します。

手順１：Cocoon設定のバージョンを確認する

【Cocoon設定】→【全体】→【サイトアイコンフォント】でバージョンを確認します。

どちらでも大丈夫ですが、特にこだわりがなければ最新のバージョンがおすすめです。

手順２：Font Awesomeのバージョンを確認する

「Font Awesome」にアクセスします。

上部の検索アイコンをクリックする。

キーワードを入力してアイコンを検索します。

右のほうにあるバージョンを確認します。

一番左の数字を、Cocoon設定で設定したサイトアイコンフォントのバージョンと同じ数字にしてください。

写真では「5.15.4」でFont Awesome5の状態になっています。

もし「6.5.2」だった場合はFont Awesome6の状態になっているので、プルダウンメニューからFont Awesome5に変更する必要があります。

Cocoon設定と使用するバージョンが異なる場合、アイコンが表示されません。

手順３：無料アイコンを使う

Font Awesomeには無料アイコンと有料アイコンがあります。

アイコン上部を見て、PRO表示がないことを確認してください。

PRO表示がなければ無料アイコンです。

PROの表示があれば有料アイコンです。

左上には、無料と有料のアイコンが混在しています。

ちょっとした操作で無料アイコンと有料アイコンが切り替わるので、使う直前に必ず確認しよう！

ライセンス契約をしていない場合、PRO表示のあるアイコンを使っても表示されません。

手順４：HTMLやCSSの入力が正しいか確認する

HTMLやCSSをコピペしてアイコンを表示させます。

メニューをつくっていない場合は、先にメニューを作成して作業を進めてください。

アイコンを使用する場所によってコピペする箇所が異なるよ！

ヘッダーメニューのFont Awesomeアイコン設定方法
ボックスメニューのFont Awesomeアイコン設定方法
カテゴリーのFont Awesomeアイコン設定方法

ヘッダーメニューのFont Awesomeアイコン設定方法

ヘッダーメニューの一部にFont Awesomeアイコンを表示させます。

HTMLのすべてをコピーする。

【ナビゲーションラベル】にペーストする。

<i class="fab fa-apple"></i>プロフィール

ペーストした前後に文章を入力することが可能です。

ヘッダーメニューアイコンの色を変えたい

左にあるパレットアイコンをクリック。

色を選択する。

HTMLにカラー情報が追加されたことを確認して、丸ごとコピーする。

ナビゲーションラベルにペーストして、メニューを保存する。

ばっちり色が変わったよ！

ボックスメニューのFont Awesomeアイコン設定方法

ボックスメニューのアイコンに表示させます。

アイコンを設定していないときは星のアイコンになっているよ！

HTMLタブの緑の部分のみをコピーする。

fas fa-home

CSS classにペーストする。

CSS class（オプション）がない場合はこちらを参照

【メニューを保存】をクリックする。

ボックスメニューアイコンの色を変えたい

ボックスメニューのアイコンカラーはCocoonのサイトキーカラーに依存します。

【Cocoon設定】→【全体】→【キーカラー】→【サイトキーカラー】を確認してください。スキンを使用している場合、スキンに依存することもあります。

もっと自由に他の色に変えたいよ！

そんなときはCSSを追加して色を変えよう！

CSSを追加して色を変える方法は以下の通りです。

CSSを追加する場所

【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。

/* ボックスメニューアイコンの色を変える */
.box-menu-icon {
  color: #a8bcc8; /*アイコンの色*/
}

ばっちり色が変わったよ！

カテゴリーのFont Awesomeアイコン設定方法

カテゴリーにアイコンを追加します。

CSSを追加したら、サイドバーとフッター、どちらのカテゴリーにもアイコンがつくよ！

CSSを追加する場所

【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。

/*カテゴリーのアイコンを変更*/
.widget_categories ul li a::before{
  font-family: "Font Awesome 5 Free"; /*Font Awesomeのバージョン*/
  content: "\f192"; /*アイコンのフォント*/
  color:#a8bcc8; /*アイコンの色*/
  padding-right:5px; /*アイコンとフォントの間の余白*/
  font-weight: 900; /*アイコンの太さ（なくてもOK）*/
  font-size:18px; /*アイコン・フォントの大きさ（なくてもOK）*/
}

子カテゴリーがある場合

子カテゴリーがある場合、大カテゴリーと同じアイコンになります。

同じでOKならそのままで大丈夫です。

子カテゴリーは別のアイコンに変えたい場合は、CSSを追加します。

下記のCSSを追加してください。

/*子カテゴリーのアイコンを変更*/
.widget_categories ul li ul li a::before{ 
  font-family: "Font Awesome 5 Free"; /*Font Awesomeのバージョン*/
  content: "\f061"; /*アイコンのフォント*/
  color: #a8bcc8; /*アイコンの色*/
}