Diviでメニューにアイコンを挿入

Diviのアイコンをメニューに表示させる方法【プラグイン不要】

こんにちは、ナオミです!

前回の記事でHTMLを入力できる所なら、Diviのアイコンを使えるという説明をしました。

Diviのアイコンを自由にサイトにロードする方法【アイコンボタンも作れちゃう】

今回はアイコンをメニューに表示させる方法を紹介します。

Diviメニューにアイコンを表示させる

このようにアイコンを表示させる方法を紹介します。

Diviのアイコンをメニューに表示させる方法を動画でご覧になりたい方はこちらからどうぞ!

メニューにCSSクラスを追加する

メニューアイテム一つ一つにユニークなCSSクラスを追加する必要があります。

表示オプションをクリックします。

Diviのメニューにアイコンを表示させる

そしてこの画像のように、『CSSクラス』をチェックしましょう。

Diviメニューにアイコンを表示させる方法、クラスをセットする

次に一つ一つのメニューを開いてユニークなクラスを追加します。

CSSでDiviのアイコンをセットする

DiviテーマでCSSをセットする方法は4つです。

こちらの動画・記事でも方法を紹介しています。

DiviでカスタムCSSを追加する4つの方法

どれを選んでもいいのですが、一つ選んでいつでも追加出来るようにします。

自分がオススメするのは、子テーマを使ってCSSを追加する方法です。

追加したいDiviのアイコンを探す

Diviのアイコンをメニューに追加する

https://dividezigns.com/divi-icon-codes/

このサイトに行って、使いたいアイコンを見つけて、アイコンの下に書いてる文字列をコピーしておきましょう。

どうして前回の記事と違うサイトなのか?

前回の記事では、Elegant Themesのサイトを紹介してますよね。

diviのiconのリスト

よくコードをみてください。微妙に違いますよね。最初の&#xの代わりに、今回は\を使うので、コード自体が分かりやすいと思い、最初から\を使ってる違うサイトにしました。

前回の記事で紹介したサイトからコードを使うことも、もちろんできますが、&#x\で置換しましょう。

挿入するCSSコード

次のコードを見てもらえばわかると思いますが、今回はアイコンの挿入にCSSの:beforeを使います。

.main-menu-home a:before {
    font-family: 'ETmodules';
    content: "\e074";
    margin-right: 3px;
    margin-top: 0px;
    font-size: 18px;
    float: left;
}

.main-menu-sample a:before {
  font-family: 'ETmodules';
  content: "\e082";
  margin-right: 3px;
  margin-top: 0px;
  font-size: 18px;
  float: left;
}

.main-menu-module a:before {
  font-family: 'ETmodules';
  content: "\e089";
  margin-right: 3px;
  margin-top: 0px;
  font-size: 18px;
  float: left;
}

注意点:

.main-menu-homeなど、このコードで使われてるクラス名は、自分が最初のステップで追加したクラスです。

あなたが設定したものと置き換えてください。

Diviメニューにアイコンを表示させる

成功すれば、こんな感じでアイコンが表示されます。

CSSを書くなら、これもまたどこでも使える方法なので、色々と試してみてください。

Diviでアイコンをサイト内の自由な場所に表示させる方法はこちらをご覧ください。

Diviのアイコンを自由にサイトにロードする方法【アイコンボタンも作れちゃう】

様々なテクニックを駆使してDiviを使いこなせ!

セクション・行・モジュールの設定の他にもDiviには様々なテクニックが存在します。ちょっとした手間を加えることで、デフォルトではできなかったことができるようになり、デザインの幅が今までより広がります。

下の記事ではDiviの様々なテクニックを紹介していますので、ぜひ合わせてご覧ください。

Divi、モバイルメニューのどこをクリックしてもメニューを表示させられる方法

Diviのヘッダーのアニメーションを消す方法【コード要らず】

Diviビルダーで使うモジュールだけ表示する方法【作業効率アップ】

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通