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

  • 60
    Like
  • 0
    Comment
More than 1 year has 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;
}

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