無料で使えるフラットアイコンフォント「Genericons」

「Genericons」はWordPressのデフォルトテーマ「TwentyFourteen」にも使用されているアイコンフォントです。汎用的なアイコンが揃っており、CSSで色やサイズが簡単に変更できるため、どんなWebサイトやブログに合うように作られています。

また、GLPライセンスを採用しており、商用利用が可能で著作権をヘッダ部分に明記しておくぐらいの制約しかないため利用するための障害はほぼありません。

今回は、この「Genericons」のダウンロードから利用方法までを紹介します。

Genericonsの使い方

Genericonsのダウンロード
Genericonsの使い方

Genericonsのダウンロード

まずは下記のサイトから「Genericons」をダウンロードします。

Genericons

スクリーンショット_010515_110759_PM

ダウンロードしたファイルを解凍するとこのようなフォルダ構成となっており、「genericons」フォルダ配下の「genericons.css」にリンクを貼ると使用できるようになります。
Genericons1

最後にサーバ上に配置し、Webサイトからリンクを貼ります。
Genericons2

linktag

<link href="サーバの配置場所/genericons/genericons.css" rel="stylesheet" type="text/css" media="all">

Genericonsの使い方

HTMLでアイコンフォントを設定

まずは基本的な使い方を紹介します。Genericonsのページに行き使いたいアイコンをクリックします。
Genericons4

「Copy HTML」をクリックするとWindowが立ち上がるため、そのソースをコピーします。
Genericons5

後はそのソースを貼り付ければ、このようにが表示できます。

Copy HTML

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

また、CSSを定義すれば通常のフォントのように見た目が変更できます。

CSS & HTML

<style type="text/css" media="screen">
.neko{
    margin-left:5px;
    font-size:200px !important;
    color:#00A8FF;
}
</style>

<span class="genericon genericon-github neko"></span>

CSSでアイコンフォントを設定

もう一つの使い方は「Copy CSS」をクリックして、CSSのコードを取得します。
Genericons6

CSSのコードは擬似要素「:before」「:after」のどちらかに設定します。

CSS

.gicon-sns{
    display: inline-block;
    font: 50px Genericons;
    margin:10px;
}
.gicon-twitter:before{
    content: '\f202';    /* twitterアイコン */
}
.gicon-facebook:before{
    content: '\f204';    /* facebookアイコン */
}
.gicon-google:before{
    content: '\f218';    /* google+アイコン */
}
.gicon-pocket:before{
    content: '\f224';    /* pocketアイコン */
}

HTML

<span class="gicon-sns gicon-twitter"></span>
<span class="gicon-sns gicon-facebook"></span>
<span class="gicon-sns gicon-google"></span>
<span class="gicon-sns gicon-pocket"></span>