CocoonでFont Awesomeを使う方法【設定・表示されない原因と解決策】

WordPress

2026/3/192026/7/17

「CocoonでFont Awesomeのアイコンを使いたいけど、設定方法がよくわからない」「コードを貼り付けたのに、アイコンが表示されない」――そんな悩みを抱えていませんか？

Font Awesomeは、ブログのメニューや見出しにおしゃれなアイコンを追加できる便利なツールです。しかし、バージョンの選択ミスや設定漏れがあると、アイコンが正しく表示されず、多くの初心者がつまずくポイントでもあります。

この記事では、CocoonでFont Awesomeを導入する手順から、本文・メニュー・見出しへの具体的な使い方、表示されないときのチェックリストまで、実際の運用経験をもとにすべて網羅して解説します。この記事で、Font Awesomeに関する疑問はすべて解決できます。

Font Awesomeとは？Cocoonとの関係を理解しよう

Font Awesomeはアイコン専用のWebフォント

Font Awesome（フォントオーサム）は、Webサイト上でアイコンを表示するための無料アイコンライブラリです。画像ファイルではなくフォントとしてアイコンを読み込むため、サイズの変更や色の変更が簡単にでき、表示も高速です。

通常のWordPressテーマでFont Awesomeを使う場合、headタグ内にCDNのコードを記述したり、専用プラグインをインストールしたりする必要があります。しかし、CocoonにはFont Awesomeがあらかじめ組み込まれているため、管理画面の設定を1箇所変更するだけですぐに使い始められます。これは、Cocoon開発者のわいひらさんがテーマ内にFont Awesomeの読み込み機能をコーディングしてくれているおかげです。

CocoonではFont Awesome 4と5が選択可能

Cocoonで利用できるFont Awesomeのバージョンは4と5の2種類です。初期設定ではバージョン4が選択されていますが、バージョン5のほうが無料で使えるアイコン数が多く（1,600個以上）、デザインも洗練されています。特別な理由がなければ、Font Awesome 5を選択するのがおすすめです。

なお、Font Awesomeの最新版はバージョン6ですが、2026年3月現在、Cocoonはバージョン6にネイティブ対応していません。バージョン6のアイコンを使いたい場合は、別途「Font Awesome」プラグインの導入が必要になります。

Font Awesomeバージョン比較（Cocoon対応状況）

バージョン	無料アイコン数	Cocoon対応	備考
Font Awesome 4	約675個	対応（初期設定）	クラス名は `fa fa-〇〇`
Font Awesome 5	約1,600個	対応（推奨）	クラス名は `fas fa-〇〇` 等
Font Awesome 6	約2,000個以上	非対応	プラグイン導入で使用可

CocoonでFont Awesome 5を有効にする初期設定【3ステップ】

Font Awesomeを使い始める前に、まずCocoonの設定でバージョンを切り替える必要があります。設定はたった3ステップで完了します。

WordPress管理画面にログインし、左メニューから「Cocoon設定」→「Cocoon設定」をクリックします。
設定画面が開いたら、「全体」タブをクリックします。少し下にスクロールすると「サイトアイコンフォント」という項目が表示されるので、「Font Awesome 5」にチェックを入れます。
ページの一番下までスクロールし、「変更をまとめて保存」ボタンをクリックして完了です。

「変更をまとめて保存」を忘れずに！

保存ボタンはページの一番上と下にあるため、設定変更後に保存を忘れてしまうケースが非常に多いです。保存しないと初期設定のFont Awesome 4のままになり、バージョン5のアイコンコードを貼り付けても表示されません。設定変更後は、必ず保存ボタンをクリックしましょう。

この初期設定を行うだけで、CocoonのサイトでFont Awesome 5のアイコンが使えるようになります。プラグインのインストールやheadタグへのコード追記は一切不要です。

Font Awesomeアイコンの探し方とコードの取得手順

公式サイトで無料アイコンを検索する方法

使いたいアイコンは、Font Awesomeの公式サイトから探します。手順は以下のとおりです。

Font Awesome 5の公式アイコン検索ページにアクセスします。
右上メニューの「Free」をクリックして、無料アイコンだけが表示されるようにフィルタリングします。

上部の検索ボックスに、探したいアイコンの英語名を入力します。たとえば家のアイコンなら「home」、メールなら「envelope」と入力します。
表示されたアイコン一覧から、使いたいものをクリックします。
アイコンの詳細ページで、表示されているHTMLコードをクリックすると、自動的にクリップボードにコピーされます。

コピーされるコードは、たとえば以下のような形式です。

<i class="fas fa-home"></i>

このHTMLコードをブログの任意の場所に貼り付けるだけで、アイコンが表示されます。

無料版と有料版のアイコンを見分けるコツ

Font Awesomeには無料（Free）版と有料（Pro）版のアイコンが混在しています。有料版の契約をしていない場合、Pro版のアイコンコードを貼り付けてもアイコンは表示されません。

見分け方は簡単です。検索結果の一覧で、アイコンの上に「PRO」というラベルが付いているものが有料版です。サイドメニューの「Free」にチェックを入れておけば、無料で使えるアイコンだけに絞り込まれるので安心です。

ブログでよく使う無料アイコンの例

用途	検索ワード	HTMLコード例
ホーム	home	`<i class="fas fa-home"></i>`
メール	envelope	`<i class="fas fa-envelope"></i>`
お問い合わせ	phone	`<i class="fas fa-phone"></i>`
カテゴリー	folder	`<i class="fas fa-folder"></i>`
検索	search	`<i class="fas fa-search"></i>`
ペン（執筆）	pen	`<i class="fas fa-pen"></i>`

CocoonでFont Awesomeアイコンを使う場所別の設置方法

記事の本文にアイコンを挿入する

記事の本文中にアイコンを入れるには、ブロックエディタの「カスタムHTML」ブロックか、「HTMLとして編集」を使います。

投稿編集画面でブロックの追加ボタン（+）をクリックします。
「カスタムHTML」ブロックを選択します。
Font Awesome公式サイトでコピーしたHTMLコードを貼り付けます。
プレビューで正しく表示されていることを確認します。

←こんな感じで表示されます。

テキストの途中にアイコンを配置したい場合は、挿入したい文章のブロックをクリック、右上の三点リーダーから「HTMLとして編集」を行うことで、任意の箇所にHTMLコードを挿入することが出来ます。

実際にやってみるとこのようにが表示されます。今回はHomeのアイコンを使ってみました。

グローバルメニュー（ヘッダーメニュー）にアイコンを追加する

ナビゲーションメニューの文字の前にアイコンを付けると、視覚的にわかりやすいメニューになります。設定手順は以下のとおりです。

WordPress管理画面の「外観」→「メニュー」を開きます。
アイコンをつけたい項目の▽をクリックして、メニューの詳細を展開します。
メニュー内の「ナビゲーションラベル」にFont AwesomeのHTMLコード（例：）を入力（コピペ推奨）します。
「メニューを保存」をクリックして完了です。

実際に出来たのがこちら。

アイコンとラベル名の間隔を調整したい場合は、の直後に半角スペースを入れることで、隙間をあけることが出来ます。

ボックスメニューのアイコンを設定したい場合

Cocoonにはアイコン付きのカード型メニュー（ボックスメニュー）機能があり、サイドバーやトップページのカスタマイズに活用できます。ボックスメニューのアイコンを変更したい場合も、同じくメニュー項目から簡単に実装することが出来ます。

WordPress管理画面の「外観」→「メニュー」を開きます。
画面右上の「表示オプション」をクリックし、「CSSクラス」にチェックを入れます（デフォルトでは非表示になっています）。

「編集するメニュー」から「ボックスメニュー」を選択する（なければ新しく作る）のを忘れずに。前述のヘッダーメニューへの記述と今回のボックスメニューへの記述を同じメニューに行うと、アイコンが二個表示されたり、二重に見えたりなどの不具合が発生します。

アイコンを付けたいメニュー項目を展開すると、「CSS class（オプション）」という入力欄が表示されます。

ここにFont Awesomeのクラス名を入力します。

HTMLコード（例：）ではなく、ダブルクォーテーション（"）で囲まれたクラス名（例：fas fa-home）だけを入力するようにしてください。

「メニューを保存」をクリックして完了です。

デフォルトのボックスメニューアイコン

カスタマイズ後のボックスメニューアイコン

ちなみに、ボックスメニューのアイコンカラーはCocoonのサイトキーカラーに連動しています。色を個別に変更したい場合は、子テーマのstyle.cssまたは「追加CSS」に以下のようなCSSコードを追加します。

/* ボックスメニューのアイコンをすべて同じ色にする */
.box-menu-icon {
    color: #ff9900 !important; /* ここに好きな色のカラーコードを入力 */
}

全ての見出し（H2・H3）の先頭にアイコンをつける

このように見出しにアイコンをつけることができます。

全ての見出しの先頭にアイコンを自動表示させるには、CSSの疑似要素（:before）を使います。これは子テーマのstyle.cssか「外観」→「カスタマイズ」→「追加CSS」に記述します。

以下は、H2見出しの先頭に編集アイコンを表示する例です。

/* H2見出しにアイコンを追加 */
.article h2 {
    position: relative;
    padding-left: 2.5em !important; /* 文字を右にずらして、アイコンを置くスペースを確保 */
}

.article h2::before {
    content: '\f00c'; /* お好きなUnicode（\マークは消さない） */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 1em; /* アイコンの位置を少し内側（右）に入れる。はみ出す場合は 1.5em などに増やす */
    top: 50%;
    transform: translateY(-50%);
    color: #ff9900; /* ここでアイコンのカラーを変更する */
}

「content」の右側にあるUnicode（f00c）の部分を変更することで、お好きなアイコンを使うことが出来ます。UnicodeはFont Awesomeのアイコンページの右上に記載されています。

Font Awesome 5では、CSSで使う場合に font-weight: 900（Solidスタイルの場合）の指定が必須です。この記述がないと、アイコンが四角（□）で表示されたり、まったく表示されなかったりします。Font Awesome 4ではfont-weightなしでも動いていたため、バージョン4からの移行時に見落としがちなポイントです。

特定の見出しの先頭にアイコンを付ける

「この見出しだけ特別にアイコンをつけたい！」（上の見出しみたいに）という場合は、記事の編集画面（ブロックエディタ）で直接HTMLを入力します。

記事の編集画面で「見出しブロック」を追加します。
見出しブロックを選択した状態で、上部に表示されるツールバーの右端にある「縦の3点リーダー」をクリックします。
「HTMLとして編集」を選択します。
以下のように、見出しの文字の前にアイコンのHTMLコード（）を追記します。

<h2><i class="fas fa-check" style="color:#ff9900;"></i> ここに見出しのテキスト</h2>

再度3点リーダーをクリックし、「ビジュアル編集」に戻すとアイコンが表示されます。

Font Awesomeアイコンの色・サイズ・回転をカスタマイズする方法

Font Awesomeのアイコンは、HTMLコードに少し記述を加えるだけで見た目を簡単にカスタマイズできます。CSSを使わずにインラインで変更できるため、初心者にもおすすめです。

色を変更する

アイコンコードに style="color: 色コード;" を追加します。

<i class="fas fa-heart" style="color: #e74c3c;"></i>

<i class="fas fa-heart" style="color: blue;"></i>

色はカラーコード（#e74c3c など）のほか、色名（red、green、blue など）でも指定できます。

サイズを変更する

Font Awesomeにはサイズ変更用のクラスが用意されています。基本のアイコンコードのclass内に、サイズクラスを追加するだけです。

クラス名	サイズ倍率
`fa-xs`	0.75倍
`fa-sm`	0.875倍
`fa-lg`	1.33倍
`fa-2x`	2倍
`fa-3x`	3倍
`fa-5x`	5倍

【記述例】

<i class="fas fa-star fa-2x"></i>

<i class="fas fa-star fa-5x"></i>

回転・アニメーションをつける

アイコンを回転させるには、class内に fa-spin を追加します。パルス状の回転にしたい場合は fa-pulse を使います。また、アイコンの向きを変える fa-rotate-90、fa-rotate-180、fa-flip-horizontal などのクラスも利用可能です。

【記述例】（緑色・3倍サイズ・回転）

<i class="fas fa-cog fa-3x fa-spin" style="color: green;"></i>

このように、色・サイズ・回転を1つのコードにまとめて指定できるのがFont Awesomeの使いやすいところです。

Font Awesomeアイコンが表示されないときのチェックリスト【原因と解決策】

Font Awesomeのアイコンが表示されない場合、原因のほとんどは設定ミスやバージョンの不一致です。以下の項目を上から順にチェックしてみてください。

チェック①：Cocoon設定のバージョンは正しいか

「Cocoon設定」→「全体」→「サイトアイコンフォント」で、Font Awesome 5が選択されているかを確認しましょう。Font Awesome 4が選ばれたままだと、バージョン5のアイコンコードは動作しません。また、設定変更後に「変更をまとめて保存」のクリックを忘れていないかも確認してください。

チェック②：有料版（Pro）のアイコンを使っていないか

Font Awesomeの公式サイトでは、無料版と有料版のアイコンが一緒に表示されます。有料プランに加入していない場合、Proラベルのアイコンを貼り付けても表示されません。サイドメニューの「Free」にチェックを入れて無料アイコンだけに絞り込みましょう。

チェック③：Font Awesomeのバージョンを揃えているか

Font Awesome公式サイトでアイコンを検索するとき、ページのバージョン表示がCocoon設定と一致しているかを確認しましょう。Cocoon設定でFont Awesome 5を選択しているのに、公式サイトでバージョン6のアイコンを選んでしまうと表示されません。Font AwesomeのページURLに「v5」が含まれていることを確認してください。

チェック④：CSSでfont-weightを指定しているか（CSS利用時）

見出しやカテゴリーのカスタマイズでCSSの疑似要素（:before、:after）を使っている場合、font-weight: 900;の記述が必須です。この指定がないと、アイコンが□（四角の豆腐）になって表示される場合があります。

チェック⑤：CDNコードを重複して追加していないか

CocoonはテーマにFont Awesomeの読み込み機能が含まれています。それにもかかわらず、headタグやプラグインで追加のCDNコードを読み込んでいると、競合して不具合が起きることがあります。Cocoonを使っている場合、自分でCDNのlinkタグを追加する必要はありません。もし追加してしまった場合は、そのコードを削除してみてください。

チェック⑥：使用中のスキンとの相性を確認する

Cocoonの一部スキンでは、CSSでfont-weightが上書きされ、Font Awesomeが正しく表示されなくなる事象が報告されています。スキンの指定を一時的に「なし」に切り替えて表示確認すると、スキンとの相性が原因かどうかを切り分けられます。

それでも解決しない場合は...

上記をすべて確認しても解決しない場合は、ブラウザのキャッシュクリア、Cocoonの高速化設定の一時無効化、Cocoon公式フォーラム（wp-cocoon.com/community）での質問も検討してみてください。フォーラムに投稿する際は、「Cocoon設定」→「テーマ情報」にある環境情報を添えるとスムーズに回答を得られます。

Font Awesome 4から5に移行するときの注意点

すでにFont Awesome 4でカスタマイズを行っているサイトをバージョン5に切り替える場合、いくつかの修正が必要です。そのまま切り替えると、既存のアイコンが表示されなくなる可能性があります。

クラス名の変更が必要

Font Awesome 4と5では、アイコンのHTMLコードに使うクラス名が異なります。

項目	Font Awesome 4	Font Awesome 5
基本クラス	`fa`	`fas`（Solid）/ `far`（Regular）/ `fab`（Brands）
HTMLコード例	`<i class="fa fa-home"></i>`	`<i class="fas fa-home"></i>`
CSSのfont-family	`"FontAwesome"`	`"Font Awesome 5 Free"`
CSSのfont-weight	不要	900（必須）

移行の際は、記事内やCSSファイル内に記述しているFont Awesome 4のコードをすべて検索して書き換える必要があります。特にCSSのfont-familyとfont-weightの変更を忘れると、アイコンが□になってしまうため注意しましょう。

移行前のバックアップは必須

バージョン変更は影響範囲が広くなる可能性があります。変更前には必ず子テーマのstyle.cssや追加CSSのバックアップを取っておきましょう。万が一表示が崩れた場合に、すぐにバージョン4に戻せるよう備えておくことが大切です。

よくある質問（FAQ）

Q1. CocoonでFont Awesome 6は使えますか？

Cocoonの標準機能ではFont Awesome 6に対応していません。バージョン6のアイコンを使いたい場合は、WordPressの「Font Awesome」公式プラグインをインストール・有効化することで対応可能です。ただし、プラグインとCocoon内蔵のFont Awesomeが競合する可能性があるため、導入後は表示確認を行ってください。

Q2. Cocoonで使えるFont Awesomeのスタイルは全種類ですか？

Font Awesome 5の無料版では、Solid（fas）、Regular（far）、Brands（fab）の3スタイルが提供されています。ただし、Cocoonの環境ではSolidスタイル（fas）が最も安定して表示されます。LightスタイルはPro（有料版）限定のため、無料ユーザーは使用できません。

Q3. アイコンが□（四角い豆腐マーク）で表示されるのはなぜですか？

アイコンが□で表示される主な原因は、Cocoon設定のバージョンとアイコンコードのバージョンが一致していないこと、CSSでfont-weight: 900を指定し忘れていること、Pro版のアイコンを使用していることの3つです。本記事の「表示されないときのチェックリスト」セクションを参考に、1つずつ確認してみてください。

Q4. Font Awesomeアイコンはサイトの表示速度に影響しますか？

Font Awesomeはフォントファイルとして一括読み込みされるため、アイコンの数が増えてもファイルサイズはほぼ変わりません。画像アイコンを複数使うよりもHTTPリクエスト数が少なく、表示速度への影響は軽微です。Cocoonの場合、CDNから読み込む方式を採用しているため、サーバー負荷もかかりません。

Q5. クラシックエディタとブロックエディタ、どちらでもFont Awesomeは使えますか？

どちらでも使えます。ブロックエディタでは「カスタムHTML」ブロックにコードを貼り付けます。クラシックエディタではテキストモード（コードモード）に切り替えてHTMLコードを挿入します。ビジュアルモードのまま貼り付けると、コードがテキストとして表示されるだけでアイコンにならないので注意してください。

まとめ

この記事では、CocoonでFont Awesomeアイコンを使う方法について、設定から活用、トラブルシューティングまで網羅的に解説しました。

この記事のポイント

CocoonにはFont Awesomeが内蔵されており、「Cocoon設定」→「全体」→「サイトアイコンフォント」をFont Awesome 5に切り替えるだけで使える
アイコンの検索はFont Awesome公式サイトで行い、必ず「Free」でフィルタリングしてから選ぶ
記事本文にはカスタムHTMLブロック、メニューにはCSS classでアイコンを設定する
色・サイズ・回転はHTMLコードへの追記だけで簡単にカスタマイズ可能
表示されないときは「バージョン不一致」「Pro版の選択ミス」「font-weight未指定」をまずチェック
Font Awesome 4から5への移行時は、クラス名やCSS記述の変更が必要

Font Awesomeのアイコンを活用すると、メニューや見出しが視覚的にわかりやすくなり、サイト全体のデザインが格段にレベルアップします。まずはグローバルメニューにお気に入りのアイコンを1つ追加するところから、ぜひ試してみてください。

この記事を書いた人

森元仁隆

元新聞記者。現場で培った取材力と表現力を基に、読者に価値ある実践的な知見を提供します。