LoginSignup
21
25

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-10-06

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

Font Awesomeの導入

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

使いたいアイコンのUnicodeを調べる

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

CSSで指定する

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

NGな書き方
.ng::after {
  font-family: "FontAwesome";
  content: "";
}

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

OKな書き方
.ok::after {
  font-family: "FontAwesome";
  content: "\f13d";
}

See the Pen contentに数値文字参照 by anchoor (@anchoor) on CodePen.

実践:リンクタイプ別にアイコンを表示する

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

See the Pen リンクタイプ別にアイコンを表示 by anchoor (@anchoor) on CodePen.

参考サイト

21
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
25