Search Posts

Font Awesome 5アイコンフォント表示機能

Font Awesome 5アイコンフォント表示機能の概要

このテーマでは、標準でアイコンフォント(Webフォント)Font Awesome 5を読み込む仕様になっています。

ウィジェットやテンプレートファイル、個別の投稿記事や固定ページに、以下のような記述をするだけで、様々なアイコンフォントを表示することが可能です。

<i class="fas fa-home"></i>

Font Awesome 5をCSS擬似要素content(::before/::after)で利用するには

CSSの擬似要素(::before/::after)contentでも利用できように、header.phpには以下の記述がありますが、

<scripti>
FontAwesomeConfig = { searchPseudoElements: true };
</scripti>

[参考サイト]
https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements

この方法で表示が重い場合は、少し実験的な試みですが、/assets/js/scripts.jsの34行目あたり、// Fontawesome Iconsを参考に、jQueryのprepend()等で、<i>タグを挿入する方法を検討してみてください。