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

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

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

＞＞Diviのアイコンセットをどこでも使う方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

よくコードをみてください。微妙に違いますよね。最初の&#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など、このコードで使われてるクラス名は、自分が最初のステップで追加したクラスです。

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

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

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

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