Posted at

fontawesomeのアイコンをcssの:before/:afterで挿入する

More than 5 years have passed since last update.

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;
}

とやればアイコンが挿入されます。捗りますね。