More than 5 years have passed since last update.

疑似要素にFont Awesomeのアイコンを使う（リンクタイプ別にアイコンを表示）

Last updated at 2018-01-24Posted at 2016-10-06

疑似要素にFont Awesomeのアイコンを表示させたい場合、contentプロパティにUnicodeコードポイントを指定します。

Font Awesomeの導入

公式サイトを参照されたし。
導入が完了すると font-family:'FontAwesome'; でアイコンが利用できるようになります。

公式サイトにアイコン一覧表があります。
ここに16進数のUnicodeもセットで記述されています。

一覧表の数値文字参照の記述をそのまま

NGな書き方

.ng::after {
  font-family: "FontAwesome";
  content: "&#xf13d;";
}

としても表示されません。CSSでは\でエスケープした16進数値で記述します。

OKな書き方

.ok::after {
  font-family: "FontAwesome";
  content: "\f13d";
}

属性セレクタを利用しリンク末尾にアイコンを表示させます。