PR

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

ライフ

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

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

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

スポンサーリンク

FontAwesomeからアイコンを選ぶ。

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

Font Awesome 4.7.0からアイコンを探す。

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

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

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

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


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

フォントのサイズを変更する。

フォントのサイズは、

<i class=”fa fa-window-close fa-lg” aria-hidden=”true”></i>

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

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

コードをいじると、


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

面白いです。

メニューでアイコンフォントを使用する。

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

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

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

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

ではまたね。

タイトルとURLをコピーしました