ウェブアイコン"Genericons"の使い方 (Wordpress)

Genericons - a free, GPL, flexible icon font for blogs!

Genericonsからダウンロードしたフォルダをサーバ上へ配置する。

その際アクセス権限変更漏れに注意

スタイルシートにGenericonsのCSSを定義する。

<link href="CSSファイルのパス" rel="stylesheet" media="screen">

Wordpressだとこんな感じ

<link href="<?php echo get_template_directory_uri(); ?>/font/genericons/genericons.css" rel="stylesheet" media="screen">  

普段使っているスタイルシート(GenericonsのCSS以外のもの)に使いたいフォントのクラスを定義する。

.twitter:before{
    content: "\f202";
    font: normal 16px Genericons;
    top:3px;
    margin-right: 5px;
    position: relative;
}

必須なのはcontentとfont。font は"Genericons"まで書いておく事

htmlファイルにアイコンを定義する。

<div class="twitter"><a href="https://twitter.com/jtaka1012">@jtaka</a></div>

これで完成。