font-awesomeをCSSの擬似要素で使う方法
最近Web制作会社のコーダーとして働き始めてからわかったことは、font-awesomeを擬似要素で使うことが１案件につき１つはあること。
よくつかうCSSなんだけれども、まだしっかりと覚えられてないから備忘録として書き残します。
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
まずfont-awesomeを使用するにはCDNで読み込むのが簡単なので、上記のコードをheadタグ内に記述する。
しかし、最近ではKitsを使用することを推奨しているみたいです。
CSS
.class::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f107";
}クラス名::before または after を付けて擬似要素のCSSを記述する。
font-awesomeを使用する場合は擬似要素のfont-familyに「”Font Awesome 6 Free”;」を指定。
そしてなぜだからわからないけれど、font-awesomeはbold(700)かblack(900)しか使えないので、font-weightも指定する。
普通の擬似要素であれば「content: ‘ ‘;」と記述することが多いが、擬似要素でfont-awesomeを使用する場合は使用したいアイコンの上に書いてある英数字を「 \（バックスラッシュ）」と共に記述。
今回の場合で言えば、「content: “\f107”;」
font-sizeでアイコンの大きさを指定することもできる。
配置は親要素にposition: relative;
擬似要素にposition: absolute; で配置を調整すればOK。