無料でかわいいアイコン『Dripicons』をWebフォントとして使う方法

シンプルで可愛く、フラットデザインにぴったりの無料アイコンセット『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");
}

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というのが入っているのでこちらを参考にするといいと思います。