Font Awesome 5を疑似要素でつかう

yasuko
V626サイト見てたら時空超えちゃう

FontAwesomeは便利だけど、font-familyの指定やfont-weightの指定がふわっとしてるので、備忘録として。

Font Awesome

使いたいアイコンを検索。

アイコンの左上に

Solid Style Regular Style Brands Style などスタイルの記載があるので

Solidは900

.class::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f534";
}

Regular Brandsは400

.class::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	content: "\f1cc";
}

コピペできるようにベーシックなスタイル。