SVGアイコンを使ってみたい人にぴったり！実装は簡単で使い勝手のよいアイコンフォント -Stackicons

Post on:2014年2月25日

sponsors

アイコンフォントに興味がある！ SVGアイコンデビューしたい！という人にぴったりな実装は簡単、しかも使い勝手のよいアイコンフォントを紹介します。

多くのアイコンフォントは単色ですが、このアイコンは複数のカラーを使い、Photoshopのレイヤーのように重ねてあるのでカラーでなくアイコンの囲いも簡単に変更できます。

Stackiconsの一番の特長はその名の通り、複数のカラーをスタックして（重ねて）アイコンが作られていることです。

下記のExampleページでは、実装されたアイコンをホバーエフェクト付きで楽しめます。

各アイコンはカラーだけでなく、形状（矩形・角丸・丸・なし）もさまざまなスタイルがclassを変更するだけで簡単に利用できます。

実装は簡単です。
Stackiconsのフォントファイルを用意し、スタイルシートを外部ファイルとして、classを付与するだけです。

<a title="Twitter" class="st-icon-twitter" href="">Twitter</a>

各アイコンはclassを変更するだけで、フルカラー・単色・エンボスのカラーオプション、矩形・角丸・丸・なしの形状のオプションを利用できます。
ホバー時のエフェクトも用意されています。

さまざまなスタイルはclass変更するだけでOK

実装を試してみたい人は、下記ページでコードを編集することができます。

アイコンは全部で75種類、企業サイトやブログなどでよく使うアイコンが揃っています。

Stackiconsはオープンソースで、個人でも商用でも無料で利用できます。