メニューにアイコンを入れる方法（バクマツ、ミナモト、トヨトミ）
この記事ではメニューにアイコンを入れる方法を解説します。
なお、テンプレート「トヨトミ」のメニューにはアイコンが初期設定で表示されています。
「バクマツ、ミナモト」には初期設定されていませんが、以下の手順でアイコンを入力することができます。
テンプレート「バクマツ、ミナモト、トヨトミ」は、ワードプレス無料テーマ「Lightning」を使用して作成しています。
メニューにアイコンを表示させる方法
わずか3ステップでメニューにアイコンを表示させることができます。
まずは、アイコンを拾ってくるためのサイトを紹介します。
・Font Awesomeからアイコンを使用する
メニューに表示させるアイコンは「Font Awesome」を使用します。
Font Awesomeとは、Webアイコンフォント集みたいなもので、似たようなものでいうと絵文字集みたいなものです。（ちょっと違うかもしれないですが…）
Font Awesomeは有料のものと無料のものがありますが、無料のものだけを検索することができます。
Font Awesome（無料のみ）からリンク先へ進んでください。
・Font AwesomeのアイコンのHTMLコードをコピー
Font Awesome（無料のみ）の中から、使用したいアイコンを選択してください。
<i class=”*** *******”></i> という文字をクリックします。
クリックするとすぐ上に Copied と表示されて(赤枠で囲んだ部分)、コピーできたことを確認できます。
・ワードプレスのメニューの項目に貼り付ける
ワードプレスのメニューへいってください。
外観→メニュー
ナビゲーションラベルの項目に、さきほどコピーしたHTMLを貼り付けます。
メニューのタイトルよりも前にHTMLを貼り付けてください。
完了したら「メニューを保存」をクリックして終了です。
メニューの各項目につき同じ作業を繰り返すと、このようなアイコンつきのメニューが完成します。
まとめ
アイコンを設定するとユーザーがメニューを使いやすくなったり、他サイトと差別化できるといったメリットがあります。
特にワードプレス無料テーマの「Lightning」は有名なテーマなので、知っている人が見ると「これはLightningを使ったサイトだな」と一目瞭然です。
ぜひ少し違ったLightningにしたい方も活用してください。
今回の例に出したデモサイトはこちら↓
【トヨトミ】士業専用のワードプレステンプレート|弁護士、司法書士、行政書士、社労士、税理士向け
「トヨトミ」テンプレート ブルーが印象的なワードプレステンプレート「トヨトミ」 キャッチーで清涼感のあるテンプレートです。 明るく力強いインパクトのあるトップペー…
士業向けのワードプレステンプレート集SAMURAI PRESS 
