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

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

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

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

Genericonsの使い方
  1. Genericonsのダウンロード
  2. 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>

divider

Trackback URL

http://webnonotes.com/design/genericons/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>