FontAwesomeの応用利用

サンプルはこちら。

See the Pen ElCvH by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

Webフォントアイコンとして人気のFontAwesomeを規程のクラス以外で利用する方法です。

CSS

h1:before, h2:before, h3:before {
  display: inline-block;
  font-family: 'FontAwesome';
  margin-right: 5px;
  color: #666;
}
h1:before {content: "\f18e";}
h2:before {content: "\f0a9";}
h3:before {content: "\f152";}

見出しそのものでなく :before による擬似要素をアイコン化して配置しています。

まずHTML側でFontAwesomeの読み込みを行い普通に扱える状態にするのが前提ですが、それで読み込んでしまえば font-family でFontAwesomeのフォントを指定し、呼び出したい要素で content で文字コードを指定するのみです。

アイコン用の文字コードはFontAwesome公式のアイコン一覧をChromeのデベロッパーツールなどで直接クラスを覗けばすぐ確認できます。