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

WordPress Enfold テーマからアイコンをショートコードやCSSで追加する方法
Icon Box要素の設定でアイコンのタイプ、タイトル、リンク、コンテンツなどを追加することができます。

- IconBoxスタイル(例:「タイトルの左側に小さなアイコンを表示」)
- IconBoxアイコン
- 제목
- タイトルリンク
- 内容
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要素が提供されます。

コメントを残す