WordPress テーマ CocoonのメニューにFont Awesomeのアイコンを追加表示する方法

WordPress テーマ CocoonのメニューにFont Awesomeのアイコンを追加する方法 Cocoon 活用法

WordPress テーマ Cocoonは、標準でFont Awesome のアイコンフォントが組み込まれて(ロードされて)利用可能になっています。本記事では、Cocoonのメニュー項目にFont Awesomeのアイコンを加えて表示させる方法を紹介します。

CocoonのメニューにFont Awesomeのアイコンを追加表示する設定方法

ここでは例として、メニュー項目の”Home”の前にFont AwesomeのHome アイコン、 を追加する方法を紹介します。(左記(上記)ではアイコンを大きくして表示しています。)

WordPressのダッシュボードから[外観]からメニューを選択します。

WordPress ダッシュボードからメニューをクリックします

メニューの編集設定ページが表示されます。メニュー構造の欄に表示されるメニュー項目の中から、Font Awesomeのアイコンフォントを追加する項目(ここでは”Home”)の右側の三角アイコン()をクリックします。

編集するメニュー項目の右側の下矢印をクリックします

メニュー項目が開かれて、以下の様な設定編集モードとなります。

メニュー項目設定編集モード

”Home”の前にFont AwesomeのHomeアイコンを入力する場合は、ナビゲーションラベル入力欄に”<i class=”fa fa-home”></i> “を追加します。

Font Awesomeのアイコンコードをナビゲーションラベルに追加します

<i class="fa fa-home"></i>

ナビゲーションラベルにFont Awesomeのコードを入力後、画面右側の[メニューを保存]を押して、設定内容を保存します。

Home”の様にメニューに表示されるようになります。

上のテキストをそのままコピーペーストしても、うまくいかなかない場合は、手入力してみて下さい。手入力したら、問題なく表示されるようになった事例のご連絡を頂いたことがあります。

本サイトのメニュー項目は、ここで紹介した方法でFont Awesomeのアイコンを追加しています。

Font Awesomeの使い方

Font Awesomeのアイコンリスト  のページにあるアイコンから好きなものを選んで表示することができます。

コードの基本形態は以下になります。

<i class="fa fa-アイコン名"></i>

Font Awesomeは、コード設置例で<i>タグをしています。簡潔であるところが好みであるため<i>タグを使用していると説明しています。<span>を使用する方がよりタグの意味的には正しいと述べています。

Font Awesome is designed to be used with inline elements (we like the tag for brevity, but using a is more semantically correct).

アイコンを大きくしたりすることもできます。

<i class="fa fa-android fa-2x"></i>

 

<i class="fa fa-android fa-3x"></i>

記事内でもFont Awesomeは、同様の使い方で利用できます。

コメント

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