![グローバルメニューに簡単にアイコンを配置してお洒落に](https://i0.wp.com/chanceman.website/wp-content/uploads/2021/08/0826-9.png?fit=387%2C238&ssl=1)
ヘッダーメニューアイコンを配置してお洒落に
ヘッダーメニューに無料でアイコンを表示するには・・
![COTECHI](https://i0.wp.com/chanceman.website/wp-content/uploads/2021/09/115a1ec0f2f8e166bc2120e177c59b39.png?w=850&ssl=1)
こんにちは、 COTECHI です。
WordPressのヘッダーメニュー(グローバルメニュー)にアイコンを足して、見やすくお洒落にしたいと思ったことはありませんか?
![P-MASTER](https://chanceman.website/wp-content/uploads/2021/09/de106e0fcc5784698d2ad0f0ad8e8771-1.png)
う~ん・・有料の WordPressの プラグインを使えば、簡単にできるのですが、お金を払ってまで・・と思ってしまいますね。
![COTECHI](https://chanceman.website/wp-content/uploads/2021/09/12abdb03561fd485a61f6e21237561e0-1.png)
そこで、今回は、簡単に無料で、今まで文字だけだったヘッダーメニューに以下のようなアイコンをプラスする方法をご紹介します。
こんな感じにしたいです。↓
![](https://chanceman.website/wp-content/uploads/2021/08/0826-8-1024x128.png)
ヘッダーメニューの作成時にひと手間を・・
1.WordPressメニューの「外観」から「メニュー」を開きヘッダーメニューの内容を作成します。
![](https://chanceman.website/wp-content/uploads/2021/08/0826-10-edited.png)
2.メニュー名に【ヘッダーメニュー】と入力して「メニューを作成」をクリックします。「メニュー項目を追加」からメニューに並べたいコンテンツを複数選び、「メニューに追加」をクリックします。
![](https://chanceman.website/wp-content/uploads/2021/08/0826-11-edited.png)
3.追加したコンテンツが並んで表示されるので、それぞれの「▼」をクリックして表示名を編集します。
![](https://chanceman.website/wp-content/uploads/2021/08/0826-12-1024x572.png)
4.Font Awesomeから目的のアイコンを探す・・
サイトのデザインやブログの記事でアイコンを使うとき、よく利用されているサービスとしては「Font Awesome」があります。そこで、無料で使えるWebアイコンサービスのFont Awesomeを使用します。
公式サイトは以下になります。Font Awesome 4 はココ : https://fontawesome.com/v4.7/
![](https://chanceman.website/wp-content/uploads/2021/08/0826-14.png)
![](https://chanceman.website/wp-content/uploads/2021/08/0826-15.png)
5.メニューのナビゲーションラベルに貼り付ける
![](https://chanceman.website/wp-content/uploads/2021/08/0826-13-1024x756.png)
ここでは、「ナビゲーションラベル」に、先ほどコピーしたアイコンフォントのHTMLソースをペーストした(赤文字部分)後に、表示したい文字を入力します。ここでは半角スペースの後、"HOME"と入力しました。
これで保存すれば出来上がりです。その他のメニューも同じように繰り返しましょう。
※Font Awesomeの最新はVer.6ですが、Cocoonで対応しているのはVer.4.7.0ですので、Ver.4.7.0を使ってください。
追加:Cocoon 2.0.0からFont Awesome5を利用できるようになりました。WordPress管理画面から「Cocoon設定」を選択し、「全体」タブの「サイトアイコンフォント」で「Font Awesome5」を選択してください。この設定変更のみで、アイコフォント変更することが可能です。