メニューにアイコンを追加してみた

メニューにアイコン付けるのってどうやるの？

他人のブログを見てみると、よくメニューにアイコンが付いてるのを見かけます。

なんかオシャレでカワイイし、どんなカテゴリーなのか分かりやすいよなぁと思いつつ･･･。

でも追加するのにプラグインとか、CSSとかいじったりしなきゃいけないのかなーと調べてみると

意外と簡単なことが判明し、早速追加してみました。

まずは追加するアイコンを探します。

よく使われているのがFont Awesomeというアイコン。

自前のサーバーにアップロードする必要がなく、簡単に使用できるアイコンだそうで、

結構な種類があります。

探す場合はSearch for Font Awesomeというサイトが日本語に対応しているので便利です。

今回はこの「棒グラフ」を使用します。

赤枠で囲まれているコードをコピーします。

ダッシュボードのメニューから外観→メニューを選択

すると以下のような画面が出てきます。

次にアイコンを追加したいメニューのナビゲーションラベルに

先ほどコピーしたコードを貼りつけます。

コードを貼りつけたら、「メニューを保存」をクリックして保存しましょう。

たったこれだけです。

他のメニューも同様に、追加したいアイコンのコードを入れていきます。

上が追加前のメニュー

これだけで大分雰囲気が変わりますね！

このアイコンは他にも色んな所に使えそうなので、もっと活用していきたいですね。