アイキャッチにもなって見やすいアイコンフォント FontAwesome を、ナビゲーションメニューで使ってみたので、簡単に手順を書いてみました。
FontAwesomeサイトからHTMLをコピー
- FontAwesomeのサイト→ヘッダー部分の「Icon」をクリック。
- サーチ欄に「home」と入力。（キーワード入力）
- 表示されたアイコンの濃いグレーのものをクリック。
- 「home」と表示されたタイトルの下にある「<i class=”fas fa-home”></i>」をクリックしてコピーする。
Cocoon内で設定する
- 管理画面→外観→メニュー をクリック。
- 上部タブ「メニューを編集する」の下にある「編集するメニューを選択」で「ヘッダーメニュー」を選択。
- 表示された「ホーム」ウィジェットの右端にある▼をクリック。
ウィジェットがなければ左側の「カスタムリンク」で作ることができます。 - ナビゲーションラベル欄の「ホーム」の前に、コピーした「<i class=”fas fa-home”></i>」をペースト。
- 右下の「メニューを保存」をクリック。
他の項目やフッターなども同じ手順で、それぞれのアイコンフォントを入れることができます。
以上、図やいろいろな説明は省いて、忘備録的に文字だけで簡単に説明をしてみました！
コメント