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

2021.12.20

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これで完了です♪

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

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

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

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