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

「Genericons」はWordPressのデフォルトテーマ「TwentyFourteen」にも使用されているアイコンフォントです。汎用的なアイコンが揃っており、CSSで色やサイズが簡単に変更できるため、どんなWebサイトやブログに合うように作られています。
また、GLPライセンスを採用しており、商用利用が可能で著作権をヘッダ部分に明記しておくぐらいの制約しかないため利用するための障害はほぼありません。
今回は、この「Genericons」のダウンロードから利用方法までを紹介します。
Genericonsの使い方
Genericonsのダウンロード
まずは下記のサイトから「Genericons」をダウンロードします。
ダウンロードしたファイルを解凍するとこのようなフォルダ構成となっており、「genericons」フォルダ配下の「genericons.css」にリンクを貼ると使用できるようになります。


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


linktag
<link href="サーバの配置場所/genericons/genericons.css" rel="stylesheet" type="text/css" media="all">
Genericonsの使い方
HTMLでアイコンフォントを設定
「Copy HTML」をクリックするとWindowが立ち上がるため、そのソースをコピーします。


後はそのソースを貼り付ければ、このようにが表示できます。
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のコードを取得します。


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>
Related Posts

Trackback URL
http://webnonotes.com/design/genericons/trackback/No Comments Yet