WordPress Enfold テーマからアイコンをショートコードやCSSで追加する方法

0

인기 WordPress テーマの一つである EnfoldにはIconエレメントやIcon Boxエレメントを使用してentypo-fontelloフォントアイコンを入力することができます。

Enfold テーマのアイコン要素

Icon Box要素の設定でアイコンのタイプ、タイトル、リンク、コンテンツなどを追加することができます。

Enfold アイコンボックス

  1. IconBoxスタイル(例: "タイトルの左側に小さなアイコンを表示」)
  2. IconBoxアイコン
  3. 제목
  4. タイトルリンク
  5. 内容

Icon Box要素を使用すると、次のような形にアイコンと内容が追加されます。

Enfold アイコンボックス

Enfold テーマに搭載されたentypo-fontelloアイコンフォントをショートコード形式やCSSの仮想要素の形式で追加することも可能です。

ショートコードで追加したい場合は、次のような形式を使用します。

[av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' color='' size='20px' position='left' custom_class=''][/av_font_icon]

ここで ue854 コード部分は、目的のアイコンのCharcodeに置き換える必要があります。 アイコンのコードを確認する方法は簡単です。

IconやIcon Box要素を追加して、目的のアイコンの上にマウスを置くと、そのアイコンのCharcodeが表示されます。

Enfold アイコンを挿入する

上の図で、四角形で囲まれたxのアイコンのCharcode値は \ ue815です。 ここでは、\を削除して ue815をショートコードに追加します。

CSSで仮想要素アイコンを追加する場合は、次のような形式で挿入します。

#avia-menu > li:nth-child(1) > a .avia-menu-text:before {
content:"\e803";
font-family: 'entypo-fontello';
position: absolute;
left: 0;
}

多くのテーマでFontAwesomeを搭載するがFontAwesomeは速度を遅くすることができるとします。 速度のためかは分からなくても Enfold テーマはentypo-fontelloフォントのアイコンが搭載されていますね。

ベストセラーのテーマである Avada テーマはFont Awesomeアイコンを置くことができるFont Awesome Icon要素が提供されます。

Avada FontAwesomeアイコン要素

メモ:

コメントを残す

コメントを入力してください!
名前を入力してください