今回は、下図のような通常のテキストのみのメニューから、
![変更前のメニュー](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon-add01-1024x257.jpg)
テキストにアイコンが追加されたメニューに変更する設定方法を画像付きで説明します。
![変更後のアイコンが追加されたメニュー](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon-add02-1024x237.jpg)
なお、設定方法は、既存のメニュー名称にコードを追加するだけなんで、非常に簡単です!
目次
メニューにアイコンを追加する設定方法
![アイコンをタッチする人](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon01-1-1024x767.jpg)
メニューにアイコンを追加する設定方法として、「通常編集画面」と「ライブプレビュー画面」がありますが、基本的には同じですので、通常の方でご理解いただけると思います。
通常編集画面からの設定方法
ダッシュボードの「外観」、「メニュー」から設定していきます。
![ワードプレスのメニュー画面を選択](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon-add03-1024x398.jpg)
![メニュー編集画面](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon-add04-1024x305.jpg)
![変更対象メニューの画面](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon-add05-1024x325.jpg)
ナビゲーションラベルは「ホーム」のまま
上記のナビゲーションラベル欄にアイコンのコードを追記するだけです。そのコードは「Font Awesome」のサイトからコピペします。
![Font Awesomeのトップページ](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon-add06.jpg)
![Font Awesomeのアイコン検索画面](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon-add07.jpg)
画面下に表示された「アイコン」を選択
![Font Awesomeの対象アイコン詳細](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon-add08.jpg)
![変更対象メニューの画面](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon-add09-1024x433.jpg)
わたしは、「アイコン」と文字列「ホーム」の間隔を調整するため、半角スペースを入れています。
![ホームが変更されたメニュー](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon-add10.jpg)
ライブプレビュー画面からの設定方法
繰り返しになりますが、こちらの設定の流れも基本的には同じです。プレビューしながら設定できるので不安な方はこちらをおすすめします。
![ライブプレビュー選択画面](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon-add11-1024x416.jpg)
![ライブプレビューでのアイコン編集](https://tokyo-futsaler.blog/wp-content/uploads/2019/03/menu-icon-add12-1024x410.jpg)
おわりに
CSSなどもいじらず、非常に簡単ですね。コードを参照した 「Font Awesome」には 様々なアイコンがあるので、ブログ構成のヒントにしてもいいかもしれません。