【Cocoonカスタマイズ】1分でグローバルメニューにアイコンを入れる方法

スポンサーリンク
すろーらいふ

すろーらいふ ブログ管理人
Linguaskill B2/TOEIC 915点/英検準1級
家族、旅行大好き
素敵なモノだけをお伝えしたい

すろーらいふをフォローする

こんにちは、すろーらいふです。

本日はCocoonのグローバルメニューにアイコンを入れるカスタマイズ方法をご紹介します。

とても簡単に設定できるので是非試してみてください♪

Cocoonテーマが最強な理由【WordPressテーマ】収益化を目指す初心者にCocoonをおすすめする5つの理由!!

スポンサーリンク

Cocoonのグローバルメニューをカスタマイズしてアイコンを入れてみた

グローバルメニューにアイコンを入れた完成形がコチラです。

「ホーム」「子育て」「ブログ」「英語」「お仕事」「生活/家事時短」だけだと味気ないですよね。

そこで、グローバルメニューにアイコンを入れる方法について解説します。

簡単3ステップで設定|cocoon グローバルメニュー カスタマイズ

簡単3ステップで設定が完了します!

  1. 「外観」→「メニュー」
  2. ヘッダー下に入れたいメニューを選択
  3. ナビゲーションラベルに入れたいアイコンのコードを入れる

1. 「外観」→「メニュー」を選択する

2. ヘッダー下に入れたいメニュー(グローバルメニュー)を「編集するメニューを選択」から選択

3. ナビゲーションラベルに表示させたいラベル名を記載するときにアイコンのコードを入れる

アイコンのコードはコチラのサイトが便利です。Font Awesome Icons

使用したいアイコンをクリックして、コードをコピー(この場合はサーモメーターのアイコン)

<i class="fa fa-thermometer-quarter" aria-hidden="true"></i>

先ほど表示させたいラベル名の前に上記コードを貼り付けるだけ!

これで完了です♪

【Cocoonカスタマイズ】グローバルメニューにアイコンを入れる方法

【Cocoonカスタマイズ】グローバルメニューにアイコンを入れる方法について解説しました。

とても簡単に設定でき、おしゃれなので、目を引くこと間違いなしです!

本日も最後までご覧いただきありがとうございました♪

\Cocoonに関するほかのカスタマイズ方法/

コメント

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