WordPress（ワードプレス）の「JIN」を使ってブログ書いてます、シロヤギ（@shiroyagi_blog）です。
JINは、とっても簡単にメニューにアイコンを追加することができます。
このブログだと、こんな感じ。
メニューにどうやってアイコンをつけるのかは、JINのマニュアルに書いてあります。
でも。
あれ？なんかうまくいかない？
Font Awesome（フォントオーサム）を使ってアイコンを入れるんですが、Font Awesomeは説明も英語だし、どこを読んでどうすれば良いのか、何だかよく分からない！
そもそも「アイコンのコード」って、どれ？
コードらしきものを貼り付けたけど、アイコンが表示されない！
今回は、そんな初心者ならでは（？）の躓きどころ、「JINのメニューにアイコンをつけるにはどうすればいいのか？」という疑問を解決していきたいと思います。
メニューを作成する
メニューの作り方はマニュアル記載の通りですので、割愛します。
今回は、Font Awesomeでコードを取得するところから解説します。
Font Awesomeでコードを取得
使いたいアイコンを探す
今回は、ホーム画面のアイコンを探すことにします。
Free（無料）でダウンロードできる中から「home」で検索すると、以下のような画面になります。
この中から、使いたいアイコンを選んでクリックします。
使いたいアイコンのコードを取得
アイコンの上に、こんな感じの文字列が出てくるので、クリックします。
クリックするだけでコードをコピーできます。
WordPressの管理画面に戻る
メニューを作っている途中でFont Awesomeのページを見に行った人は、WordPressのメニュー設定画面が開きっぱなしになっていると思うので、WordPressのメニュー設定画面に戻ってください。
メニューの画面が開いていない人は、外観からメニューを選択して、メニュー設定画面を開きましょう。
表示オプションで説明にチェックを入れる
右上にある表示オプションをクリックすると、いろいろ選べるページが出てくるので、説明にチェックを入れます。
アイコンを入れたい項目にコードを貼り付け
アイコンを入れたいメニューを選んで、アイコンを入れたいカテゴリーの説明欄に、先ほどコピーしてきたコードを貼り付けます。
で、このままメニューを保存したいところなんですが、このまま保存すると、アイコンは表示されません！！
しかも、なんでやねんと思ってもう一度、説明欄を確認すると、先ほど貼り付けたはずのコードが消えてしまっています。
コードの不要な部分を削除する
そこで必要になるのが、不要な部分の削除です。
先ほど貼り付けたコードは、以下のような形式になっているはず。
<i class=”○○”></i>
この○○以外の部分を削除してから、メニューを保存ボタンをクリックします。
完成！
すると、出だしで書いたとおり、こんな感じにメニューにアイコンが表示されます。
まとめ：コード貼り付け後、「<i class=”」「”></i>」を削除すれば、アイコンが表示される
今回は、私の覚え書きもかねて、JINでメニューにアイコンを表示させる方法について解説しました。
Font Awesomeで取得できるコードは、全部
<i class=”○○”></i>
になっているので、○○以外の部分を削除すれば、JINではメニューにアイコンが表示されます。
こんな感じで、JINでは簡単にメニューにかわいいアイコンをつけることができます。
WordPressやJIN初心者で「やり方がわからなかった！」という方は、是非アイコンをつけて、ブログをワンランクアップさせてみてくださいね！
