WordPress

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

見本

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

全部で3ステップです。

スポンサーリンク

1.Font Awesoome 5を選択する

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

Font Awesome設定

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

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

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

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

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

Font Awesomeホーム

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

3.コードを追加する

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

ヘッダーメニューアイコン手順1

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

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

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

コメント

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