💻
fontawesomeのアイコンをcssの:before/:afterで挿入する
cssのcontentプロパティではHTMLを挿入することはできません。
/* できない */
h1:before {
content: "<i class='fa fa-check-square'></i>";
}
ではどうするか。css/font-awesome.css
を見てください。
/* css/font-awesome.css */
:
.fa-level-down:before {
content: "\f149";
}
.fa-check-square:before {
content: "\f14a";
}
.fa-pencil-square:before {
content: "\f14b";
}
:
fontawesomeのフォントセットで "\f14a" というテキストが fa-check-square のアイコンに相当するということが分かります。
というわけで、
/* できる */
h1:before {
content: "\f14a";
font-family: FontAwesome;
}
とやればアイコンが挿入されます。捗りますね。
Discussion