ワードプレス、Cocoon：メニューにアイコンを付ける方法。

カテゴリーのメニューがあまりにも味気ないので、アイコンを付けてみました。

なんだかかわいいじゃないですか。

ワードプレスのテーマ、CocoonではFont Awesomeのアイコンフォントが使用できます。

FontAwesomeからアイコンを選ぶ。

さっそくFont Awesomeで使いたいアイコンを探します。

例えば、ウインドウを閉じるアイコン（）を使いたい場合、選んでクリックすると下のように表示されます。

ここから、赤いアンダーラインのコードをコピーします。

コードの中の、【aria-hidden＝”true”】の部分は、テキスト読み上げソフトなどで「読まない」というような意味なので削除しても構いません。

このコードをブログのテキストに貼り付けると、

このようにアイコンフォントが表示されます。

フォントのサイズは、

赤字部分にサイズの指示を記載します。

下記のように5段階に拡大することが可能です。

コードをいじると、

Loading…
アイコンを動かすこともできます。

面白いです。

アイコンフォントをメニューに表示するには。

ダッシュボードの外観＞メニューから、メニューのナビゲーションラベルにアイコンのフォントを記載します。

これでメニューのカテゴリー名の前に、アイコンが表示されます。

他にもいろいろ応用できそうな、面白いカスタムですね。

ではまたね。