CSSのみで「Font Awesome」のアイコンを表示する方法

通常アイコンWebフォント「Font Awesome」は、HTMLソース中にアイコン表示用のコードを追加する必要がありますが、スタイルシートの疑似要素:beforeを使用して特定のタグ、クラスに対してアイコンを表示することが出来ます。

Font Awesomeの仕組み

Font Awesomeのアイコンは以下のように、faクラスでFont Awesomeをフォントファミリーとして指定し、fa-{アイコン名}クラスの疑似要素:beforeのcontentプロパティでアイコンの種類を指定しています。

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome; /*Font Awesomeのフォントファミリー*/
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-check-square-o:before {
    content: "\f046";  /*アイコンの種類*/

つまり、任意のタグやクラスに上記のスタイルシートの設定を付加することで、自由にアイコンを表示することが出来ます。

アイコンスタイルシートの設定

contentプロパティの確認、スタイルシートの設定に関する内容を記載します。

contentプロパティの確認

上記のcontent: “\f046”;のようなcontentプロパティの値は、チートシートで確認することが出来ます。
また、本ページ下にもFont Awesomeのcontentプロパティ早見表を添付していますのでご活用下さい。

アイコン横にグレーで表示されているフォントコードの内、下4桁のfxxxがアイコンを表示するためのcontentプロパティになります。

スタイルシートの設定

例として、WordPressテーマ「Twenty Sixteen」の記事タイトルの先頭にアイコンを表示する設定を行います。
entry-titleクラスの疑似要素:beforeに、以下のような記述を追加します。

.entry-title:before{
    content: '\f046';
    display: inline-block;
    font-family: FontAwesome;
    font-weight: normal;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

デモ