擬似要素(::before,::after）でFontAwesomeや丸付き数字など特殊文字を表示する

CSSの擬似要素(::before,::after）のcontentプロパティにFont AwesomeのWebフォントの値や丸数字（丸付き数字①②③④⑤⑥⑦⑧⑨⑩）、♥や♠などのような特殊文字を表示する方法。

擬似要素に丸付き数字などの特殊文字を使う場合

丸付き数字や特殊文字をhtmlに記述する場合、「数値文字参照」に変換して表示します。

<p>&#9733;新着記事</p>

は

★新着記事

と表示されます。が、CSSの擬似要素を使って表示させたい場合、

p::before{
content:"★";
}

と入力してもそのまま値が表示されてしまい、意図した通りにはなりません。

まず擬似要素に「★」を記述したい場合は10進数ではなく16進数の数値文字参照を使います。

でも「&#x2605」をそのまま入力できませんので以下の要領でエスケープ処理します。

1. 「＆」（アンド）を「＼」（バックスラッシュ）に変更
2. 「＃」（シャープ）「x」（小文字エックス）を「0」（数字ゼロ）にする
3. 「;」を削除する

結果、

\02605

となりました。
これを擬似要素のcontentプロパティに入れます。

p::before{
content:"\02605";
}

これで:beforeや:afterなどの要素で特殊文字を表示させることができます。

記号など特殊文字を10進数、16進数に変換してくれる便利ツール
https://www.benricho.org/moji_conv/15.html

丸付き数字とよく使いそうな文字を一覧にまとめました。

Font Awesomeのフォントを擬似要素で使う場合

同じようにFont AwesomeのWebフォントを擬似要素で使いたい場合、
fa-arrow-right
のようなclass名でなくunicode値をちょっとごにょごにょして入力する必要があります。

通常のFont Awesomeの表示

<p><i class="fa-arrow-right"></i>新着記事</p>

このように記述すると以下のようになります。

これをi要素を使わずに擬似要素を使って表示させたい場合は以下のようになります。（Font Awesome4.7の場合）

FontAwesomeのチートシートにあるCSSクラス名の横にあるユニコードの値を変換して使います。

[]

「&」を「\」にして「#x」と「;」はトル

p::before{
content:"\f061";
font-family: FontAwesome;
}

Font Awesome 5の場合はちょっと記述が変わりました。font-weightを指定しないと表示されない（フォントによるみたいですが）

Font Awesome5のチートシートではユニコード値は「\」バックスラッシュを頭につけてそのまま使えます。

p:before{
	content:'\f061';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

Font Awesome 4.7.0 Cheatsheet
https://fontawesome.com/v4.7.0/cheatsheet/

Font Awesome Free's Cheatsheet
https://fontawesome.com/cheatsheet/free/solid

以上、擬似要素で特殊文字やFont Awesomeのフォントを使う方法の覚書でした。