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

Diviでアイコンをプラグイン無しで使う

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

皆さっは、Diviの広告モジュールを使ったことがありますか?

Diviのアイコンリスト

そしてそこで表示されたアイコンのリストをみて、これって他の場所で使えないのかなって思ったことはありませんか?

実はこんな感じで好きな所で使えるんです。

ビルダーを使ってなくても、Diviを使ってれば使えちゃうんです。

ちなみに、このアイコンセットはフォントでして、『ETModules』というフォントなんです。

どうやって好きなアイコンを表示させるのか説明していきます。

好きなDiviのアイコンを見つける

まずはアイコンを見つけましょう。

https://www.elegantthemes.com/blog/resources/elegant-icon-font#glyphs

このページにアイコンのリストがあります。

diviのiconのリスト

使いたいアイコンを見つけます。

Diviアイコンを入れるためのHTMLとCSS

次に『テキスト』フィールドがあるDiviモジュールを探します。

今回は普通のテキストモジュールを使います。

Diviのテキストモジュール

テキストモジュールのテキストフィールドです。

画像のようにビジュアルではなく、『テキスト』タブを開きます。

そして次にこのようにコードを入れます。

<span style=”font-family: ETModules;”>{アイコンの文字列}</span>

この『アイコンの文字列』と書いてある所に、先ほど見つけたアイコンの下の文字列をコピペします。

<span style=”font-family: ETModules;”>&#xe09e;</span>

Diviのアイコンをテキストモジュールで使う例

このようにアイコンが表示されれば成功です。

テキストモジュールだけでなく、HTMLを挿入できる所ならどこでも使えます。

是非試してみてください!

コメントする

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