Lightningで見出しにアイコンフォントを自動で入れる

この記事を読むのに必要な時間は約 5 分です。

最近は、アイコンフォントを使うことってそう難しいものではなくなりました。
昔は、Gif画像を文字サイズに合わせるなどいろいろ工夫したものですが・・・
Lightningテーマと必須プラグインであるVK All in One Expansion Unit の組み合わせでスタイルシートをカスタマイズして上記のような見出しの中に自動的にアイコンフォントを挿入することが可能になります。

カスタマイズ方法

まず、外観→カスタマイズ→Lightning Font Awesomeの設定で5 Web Fontsが選択されていることが前提になります。
この部分は、設定自体はそう難しくありません。
確認できたら次に進みます。

スタイルシートのカスタマイズ

スタイルシートを追加する場所は、右記の画像にあるとおり
外観→カスタマイズで追加CSSをクリックして
追加CSSの末尾に下記にあるスタイルシートのどちらかをコピペします。

■スタイルシート■

h2:before,
.subSection .subSection-title:before {
content :”\★★★”;
font-weight: 900;
font-family: “Font Awesome 5 Free”;
margin-right:0.4em;
speak: none;
line-height: 1;
}

■スタイルシート■

h2:before,
.subSection .subSection-title:before {
content :”\★★★”;
font-weight: 900;
font-family: “Font Awesome 5 Brands”;
margin-right:0.4em;
speak: none;
line-height: 1;
}

スタイルシートを選ぶ方法については、使うアイコンによって変わります。
上記２つに共通する部分★★★で使うアイコンを指定します。
Awesomeサイトで自由に選択可能ですが、基本無料のアイコンのみになります。

上記のサンプルを使って解説します。
左側の赤枠でBrands Styleの部分ですが、この場合に下のスタイルシートをコピペします。
それ以外は、上のスタイルシートをコピペしてください。
次に★★★の部分に選択された赤枠の部分を置き換えます。
上記の場合は、★★★→f19aを入れます。
これで保存（公開ボタンクリック）すると自動で表示されるようになります。
この方法は、Lightningテーマのサイトでも紹介されています。