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;
}

 スタイルシートを選ぶ方法については、使うアイコンによって変わります。
上記2つに共通する部分★★★で使うアイコンを指定します。
Awesomeサイト  で自由に選択可能ですが、基本無料のアイコンのみになります。
Fonts Awesome
上記のサンプルを使って解説します。
左側の赤枠でBrands Styleの部分ですが、この場合に下のスタイルシートをコピペします。
それ以外は、上の スタイルシートをコピペしてください。
次に★★★の部分に選択された赤枠の部分を置き換えます。
上記の場合は、★★★→f19aを入れます。
これで保存(公開ボタンクリック)すると自動で表示されるようになります。
この方法は、Lightningテーマのサイトでも紹介されています。

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!