💻

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

2014/07/11に公開

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

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

GitHubで編集を提案

Discussion