WordPress テーマ Cocoonは、標準でFont Awesome のアイコンフォントが組み込まれて（ロードされて）利用可能になっています。本記事では、Cocoonのメニュー項目にFont Awesomeのアイコンを加えて表示させる方法を紹介します。
CocoonのメニューにFont Awesomeのアイコンを追加表示する設定方法
ここでは例として、メニュー項目の”Home”の前にFont AwesomeのHome アイコン、 を追加する方法を紹介します。（左記（上記）ではアイコンを大きくして表示しています。）
WordPressのダッシュボードから［外観］からメニューを選択します。
メニューの編集設定ページが表示されます。メニュー構造の欄に表示されるメニュー項目の中から、Font Awesomeのアイコンフォントを追加する項目（ここでは”Home”）の右側の三角アイコン()をクリックします。
メニュー項目が開かれて、以下の様な設定編集モードとなります。
”Home”の前にFont AwesomeのHomeアイコンを入力する場合は、ナビゲーションラベル入力欄に”<i class=”fa fa-home”></i> “を追加します。
<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は、同様の使い方で利用できます。
コメント