ナビケーションメニューでの FontAwesome の入れ方

アイキャッチにもなって見やすいアイコンフォント FontAwesome を、ナビゲーションメニューで使ってみたので、簡単に手順を書いてみました。

FontAwesomeサイトからHTMLをコピー

  1. FontAwesomeのサイト→ヘッダー部分の「Icon」をクリック。
  2. サーチ欄に「home」と入力。(キーワード入力)
  3. 表示されたアイコンの濃いグレーのものをクリック。
  4. 「home」と表示されたタイトルの下にある「<i class=”fas fa-home”></i>」をクリックしてコピーする。

Cocoon内で設定する

  1. 管理画面→外観→メニュー をクリック。
  2. 上部タブ「メニューを編集する」の下にある「編集するメニューを選択」で「ヘッダーメニュー」を選択。
  3. 表示された「ホーム」ウィジェットの右端にある▼をクリック。
    ウィジェットがなければ左側の「カスタムリンク」で作ることができます。
  4. ナビゲーションラベル欄の「ホーム」の前に、コピーした「<i class=”fas fa-home”></i>」をペースト。
  5. 右下の「メニューを保存」をクリック。

他の項目やフッターなども同じ手順で、それぞれのアイコンフォントを入れることができます。
以上、図やいろいろな説明は省いて、忘備録的に文字だけで簡単に説明をしてみました!

コメント