ワードプレスのメニューにアイコンを表示させる方法｜画像付解説

今回は、下図のような通常のテキストのみのメニューから、

テキストにアイコンが追加されたメニューに変更する設定方法を画像付きで説明します。

なお、設定方法は、既存のメニュー名称にコードを追加するだけなんで、非常に簡単です！

メニューにアイコンを追加する設定方法

メニューにアイコンを追加する設定方法として、「通常編集画面」と「ライブプレビュー画面」がありますが、基本的には同じですので、通常の方でご理解いただけると思います。

通常編集画面からの設定方法

ダッシュボードの「外観」、「メニュー」から設定していきます。

上記のナビゲーションラベル欄にアイコンのコードを追記するだけです。そのコードは「Font Awesome」のサイトからコピペします。

わたしは、「アイコン」と文字列「ホーム」の間隔を調整するため、半角スペースを入れています。

ライブプレビュー画面からの設定方法

繰り返しになりますが、こちらの設定の流れも基本的には同じです。プレビューしながら設定できるので不安な方はこちらをおすすめします。

おわりに

CSSなどもいじらず、非常に簡単ですね。コードを参照した 「Font Awesome」には 様々なアイコンがあるので、ブログ構成のヒントにしてもいいかもしれません。