アトム電器 三軒家店(有限会社 おかもとでんか)のホームページ。大阪市大正区にある町の電気屋さん。家電製品の販売、エアコン、電気工事、パソコンからリフォーム、オール電化など電気のことならなんでもお任せ下さい!アトム電器三軒家店

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

Web開発

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

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

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

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

    h1:before {
    	content: '\f26c';
    	font-family: FontAwesome;
    }
  3. ちなみにMac OSで、バックスラッシュを入力するには option + ¥ キーで入力することができます。
    option+¥キー

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