サンプルはこちら。
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のデベロッパーツールなどで直接クラスを覗けばすぐ確認できます。