シンプルで可愛く、フラットデザインにぴったりの無料アイコンセット『Dripicons』
ダウンロードはこちらから
使用イメージが紹介されていますが、かなりオシャレなのでオススメです。
aiやpsdなど様々なフォーマットが用意されているのですが、今回はWebフォントの使用方法についてまとめたいと思います。
1 Webフォントをダウンロード、読み込む
ダウンロードしたフォルダ「webfont」→「fonts」からフォントファイルを任意の場所に設置します。
次にWebフォントを読み込むCSSを記述します。
※fontsフォルダごと移動した場合は下記の通りです。
@font-face {
font-family: "dripicons";
src:url("fonts/dripicons.eot");
src:url("fonts/dripicons.eot?#iefix") format("embedded-opentype"),
url("fonts/dripicons.ttf") format("truetype"),
url("fonts/dripicons.svg#dripicons") format("svg"),
url("fonts/dripicons.woff") format("woff");
}
次にWebフォントを読み込むCSSを記述します。
※fontsフォルダごと移動した場合は下記の通りです。
@font-face {
font-family: "dripicons";
src:url("fonts/dripicons.eot");
src:url("fonts/dripicons.eot?#iefix") format("embedded-opentype"),
url("fonts/dripicons.ttf") format("truetype"),
url("fonts/dripicons.svg#dripicons") format("svg"),
url("fonts/dripicons.woff") format("woff");
}
2 before セレクター、contentプロパティで表示
<div data-icon="デモサイトから使いたいアイコンのコードを入力"></div>
次に :before セレクター、contentプロパティで要素の前に新たな要素を追加します。これがアイコンになります。
CSSに下記を記述します。
[data-icon]:before {
font-family: "dripicons";
content: attr(data-icon);
}
属性セレクタを使って、data-icon属性を持つ要素の前（:before）にcontentプロパティでアイコンを挿入します。ここではattr()を利用し、date-iconの属性値を取得し挿入しています。
詳しくはダウンロードしたファイルの中にwebfont.cssというのが入っているのでこちらを参考にするといいと思います。
