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

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

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

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

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

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

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が表示されます。

上の図で、四角形で囲まれた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要素が提供されます。

メモ：

• Diviテーマにフォントオーサムを追加するDivi Font Awesomeプラグイン
• WordPress ダシアアイコンをフロントエンドで有効にする方法
• WordPress 段落/リスト（リスト）ブロックの前にアイコンを表示する方法