Lightningで見出しにアイコンフォントを自動で入れる
この記事のURLとタイトルをコピーする
この記事を読むのに必要な時間は約 5 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
最近は、アイコンフォントを使うことってそう難しいものではなくなりました。
昔は、Gif画像を文字サイズに合わせるなどいろいろ工夫したものですが・・・
Lightningテーマ と必須プラグインであるVK All in One Expansion Unit の組み合わせでスタイルシートをカスタマイズして上記のような見出しの中に自動的にアイコンフォントを挿入することが可能になります。
カスタマイズ方法
まず、外観→カスタマイズ→Lightning Font Awesomeの設定で5 Web Fontsが選択されていることが前提になります。
この部分は、設定自体はそう難しくありません。
確認できたら次に進みます。
この部分は、設定自体はそう難しくありません。
確認できたら次に進みます。
スタイルシートのカスタマイズ
スタイルシートを追加する場所は、右記の画像にあるとおり
外観→カスタマイズで追加CSSをクリックして
追加CSSの末尾に下記にある スタイルシートのどちらかをコピペします。
外観→カスタマイズで追加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;
}
.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;
}
.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テーマのサイトでも紹介されています。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存