WEBフォントの「Genericons（ジェネリコン？）」を使ったアイコン表示。

「Genericons（以下ジェネコン）」とは、
WordPressのテーマで使われている記号用のWEBフォントで、
「 」こんな感じや、
「 」こんな感じのアイコンを
画像ではなく文字として表示するためのフォントです。

※【2017.04.30追記】現在「Generinons」は「Genericons Neue」に仕様が変わり、GitHubからSVGやCSS等のデータをダウンロードして使うようになっています。また、新仕様ではSNS等のロゴマークも無くなっています。
詳しくは本家 http://genericons.com/ にてご確認ください。

今回はこのフォントを通常のHTMLに組み込んで使ってみます。

 

●STEP.1　準備

こちらの配布サイトから、CSS・WEBフォントデータをダウンロード。

●STEP.2　設置

ダウンロードした圧縮ファイルを展開して、必要なデータをサイトへ設置。

展開したフォルダ「genericons」の中に、同名のフォルダが入っています。
必要なのはこの内方の中身だけなので、内側の「genericons」フォルダごとCSSフォルダなどに設置してやればOKです。

●STEP.3　読込み

設置した「genericons」フォルダの中にあるCSSファイルを、アイコンを表示させたいHTMLページに<link>タグで読み込みます。

●STEP.4　表示

アイコンを表示したいタグの擬似クラス「:before」に、CSSでフォントファミリーとコンテンツを指定。

.twitter {
 font-family:"Genericons";
 content: '\f202';

 /* 文字のサイズや色はお好みで */
 font-size:1６px;
}
.instagram {
 font-family:"Genericons";
 content: '\f215';

 /* 文字のサイズや色はお好みで */
 font-size:1６px;
}

また、アイコンを表示したいタグに直接以下のようなクラスを指定するだけでも表示できます。

<span class="genericon genericon-instagram"></span>

結果はこんな感じ。

 

WordPressでは、
-webkit-font-smoothing と -moz-osx-font-smoothing プロパティを使って、アンチエイリアスを効かせていますが、今回は割愛します。