擬似要素でアイコンフォント( fontawesome 5 )を挿入する。
目次
cssの「クラス名::after」「クラス名::before」
で特定の要素の前後に文字列を付けられる擬似要素の仕組みを利用して、fontawesomeのアイコンフォントを挿入します。
今回はリストタグ内の文字列の前に、シンプルな記号を付ける例で紹介します。
今回のように設定しておけば、リストの項目が増えた場合でも自動的にアイコンが項目の隣に挿入されるので、
その都度、アイコンを挿入しなくても良くなります。
完成図
– HTML –
(headタグ内)
fontawesomeをCDNで読み込ませる。
|
1 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> |
|
1 2 3 4 5 6 7 8 9 |
<div class="iconList"> <ul> <li>ABOUT</li> <li>MEMBER</li> <li>LIVE</li> <li>INFO</li> <li>GOODS</li> </ul> </div> |
– CSS –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@charset "UTF-8"; .iconList{ background-color: aquamarine; } ul li { list-style: none; padding:7px; } .iconList li::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content:"\f105"; padding-right: 1em; } |
アイコンフォントのiタグをそのまま擬似要素のcontentに指定することは出来ません。
font-familyプロパティをfontawesomeと対応させた上で、contentプロパティへ使いたいフォントの当該の※Unicodeを指定します。
※fontawesomeアイコンのUnicodeの記載場所(画像右下:f105と記載)
<以下、上手く表示されない時の原因も含めポイントを解説>
・font-familyの指定を正しく記述する。
今回の記事ではfontawesomeのバージョン5をcdnで利用している例で紹介していますので
ここに関しては使用するバージョンによってその都度確認する必要があります。
・font-weightプロパティを指定する。
指定するアイコンによってはfont-weightプロパティを必ず指定しないと正しく表示されないものがあります。
その際、値を900もしくは400のどちらかを選びます。
記事によってはアイコンの個別ページ内にあるsolid、regularでの使い分けと書いてありましたが、このあたりは全てのアイコンで検証する事が出来ませんのでよくわかりませんでした。
納得いく形でアイコンの見本通りに再現出来るまで試してみると良いでしょう。
・Unicodeの前に\(バックスラッシュ)がない
Unicodeの前に\(環境によっては¥記号)のエスケープシーケンスを必ず置く。
また、今回はアイコンとリスト項目の間に隙間を入れたかったので、padding-right プロパティで一文字分空けています。
Follow me!
