アトム電器三軒家店

新規のお客さまからのご注文は休止中です。
(以前からお取引のあるお客様のご注文は引き続き行っております)

2016年04月22日 2023年05月17日

2022年6月1日よりPCやネットワーク関連がmuchbowに移動しました。
そのため、お問い合わせはアトム電器三軒家店(有限会社おかもとでんか)では
なく、muchbow (https://www.muchbow.com/)にお願いします。

CSSのcontentプロパティでFont Awesomeを使う

色々なアイコンを簡単に利用できるFont Awesome。HTMLでiタグを使う場合はアイコンの詳細ページに表示されているタグを利用すれば簡単に表示することができます。

CSSの::afterや::beforeなどの擬似要素のcontentプロパティで使う場合は記述方法が違うのでメモっておきます。

フォント詳細ページに記載されているUnicode部分の値（ここでは、f26c）の前にバックスラッシュ（\）を追加して、contentプロパティに記述します。
Font Awesomeフォントを使うことを明示する必要があるので、font-familyプロパティに FontAwesomeを記述します。
```
h1:before {
	content: '\f26c';
	font-family: FontAwesome;
}
```
ちなみにMac OSで、バックスラッシュを入力するには option + ¥ キーで入力することができます。
Windowsでは、\ キーで入力することができます。フォントによってはバックスラッシュが表示されず「¥」が表示される場合があります。