メニューにアイコンを入れる方法（バクマツ、ミナモト、トヨトミ）
テンプレート「トヨトミ」のメニューにはアイコンが初期設定で表示されています。
メニューの各項目に合ったアイコンを表示させています。
この記事では、このアイコンの表示方法を紹介します。
テンプレート「トヨトミ」は、ワードプレス無料テーマ「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 
