WordPress

【WordPress】ヘッダーメニューにアイコンを追加する方法

ヘッダーメニューのアイコンの見本
見本

ヘッダーメニューにアイコンを追加するためには、
Cocoonの標準機能として搭載されている「Font Awesome(無料)」を使用します。

全部で3ステップです。

スポンサーリンク

①Font Awesoome 5を選択する

はじめに、WordPressの管理画面から「Cocoon設定→全体」へ進みます。

WordPressの管理画面のサイトアイコンフォント

上の画像のように「サイトアイコンフォント」で「Font Awesome5」を選択してください。

Cocoonでは、この操作だけで導入することができます。

②「Font Awesome」の公式サイトでアイコンを選択する

公式サイト(https://fontawesome.com/)を開き、アイコンを検索します。

Font Awesomeからアイコンを検索

今回は、「Home」で検索してみます。

Font Awesomeからアイコンを選択

検索一覧の中から、導入したいアイコンを選択し、
上の画像の四角で囲った部分にある「<i class=”fa fa-home fa-fw”></i>」をクリップボードへコピーします。

③コードを追加する

WordPressの管理画面へ戻り、「外観→メニュー」へ進みます。

WordPressの管理画面のナビゲーションラベル

アイコンを追加したいメニューの「ナビゲーションラベル」に、先ほどコピーしたコードを追加します。

「HOME」→「<i class=”fa fa-home fa-fw”></i> HOME」

問題がないようであれば、画面右下にある「メニューを保存」をクリックして完了です。

コメント

タイトルとURLをコピーしました