こんにちは、ナオミです!
前回の記事でHTMLを入力できる所なら、Diviのアイコンを使えるという説明をしました。
今回はアイコンをメニューに表示させる方法を紹介します。
このようにアイコンを表示させる方法を紹介します。
メニューにCSSクラスを追加する
メニューアイテム一つ一つにユニークなCSSクラスを追加する必要があります。
表示オプションをクリックします。
そしてこの画像のように、『CSSクラス』をチェックしましょう。
次に一つ一つのメニューを開いてユニークなクラスを追加します。
CSSでDiviのアイコンをセットする
DiviテーマでCSSをセットする方法は4つです。
どれでもいいのですが、一つ選んでいつでも追加出来るようにします。
自分がオススメするのは、子テーマを使って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の使い方完全ガイドをご覧ください。