ブログ

【Cocoon】グローバルナビメニューに『アイコンフォント』をカスタマイズ!

ヘッダーメニューにアイコンフォントをカスタマイズしたい!!

グローバルナビゲーションに【アイコンフォント】をカスタマイズすることができます。

①パターン

②パターン

お好きなデザインをカスタマイズしてください。

それではやり方をご紹介します。

スポンサーリンク

アイコンフォントの設定

まずはアイコンフォントの設定をしていきます。

Font Awesome5をクリック

アイコンフォントを選ぶ

Font Awesome5のサイトからアイコンを選んでください。

無料(Free)版のみ表示するようにしています。

もし、なっていない場合は左にある(Free)をにチェックをしてください。

検索ツールバーに英単語を入力してください。

わたしはプロフィールのアイコンを探したいので【user】と入力しました。

検索して出てきたアイコンの中から赤枠のアイコンを選びます。

それをクリックします。

クリックしたらこの画面になります。

赤枠のアイコンコードをクリック。するとコピーされるのでこれで準備OKです。

①パターンのカスタマイズ方法

WordPressを開く

【外観】→【メニュー】の順番でクリック

タブをクリック

ナビゲーションラベルにアイコンコードを貼り付け

赤枠のようにカテゴリー名の前にコピーしたアイコンコードを貼り付けます。

見栄えの話ですが、半角スペースをあけた方がオススメです!!

メニュー保存をクリック

これで完成です!!

②パターンのカスタマイズ方法

アイコンを選んでコードをコピーしてください。

WordPressを開く

【外観】→【メニュー】の順番でクリック

表示オプションをクリック

【説明】にチェックを入れる

タブをクリック

ナビゲーションラベルにアイコンコードを貼り付け

説明にカテゴリー名を入力

メニュー保存をクリック

これで完成です!!

このようにアイコンフォントの色をかえることもできます。

やり方はこちらで紹介しています!!

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