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

2016年04月22日 2023年06月01日

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

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

1. フォント詳細ページに記載されているUnicode部分の値（ここでは、f26c）の前にバックスラッシュ（\）を追加して、contentプロパティに記述します。
   

2. Font Awesomeフォントを使うことを明示する必要があるので、font-familyプロパティに FontAwesomeを記述します。

   h1:before {
   	content: '\f26c';
   	font-family: FontAwesome;
   }

3. ちなみにMac OSで、バックスラッシュを入力するには option + ¥ キーで入力することができます。
   

4. Windowsでは、\ キーで入力することができます。フォントによってはバックスラッシュが表示されず「¥」が表示される場合があります。