SVGアイコンを使ってみたい人にぴったり!実装は簡単で使い勝手のよいアイコンフォント -Stackicons
Post on:2014年2月25日
アイコンフォントに興味がある! SVGアイコンデビューしたい! という人にぴったりな実装は簡単、しかも使い勝手のよいアイコンフォントを紹介します。
多くのアイコンフォントは単色ですが、このアイコンは複数のカラーを使い、Photoshopのレイヤーのように重ねてあるのでカラーでなくアイコンの囲いも簡単に変更できます。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022500.png)
Stackiconsの一番の特長はその名の通り、複数のカラーをスタックして(重ねて)アイコンが作られていることです。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022504.png)
下記のExampleページでは、実装されたアイコンをホバーエフェクト付きで楽しめます。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022502.png)
各アイコンはカラーだけでなく、形状(矩形・角丸・丸・なし)もさまざまなスタイルがclassを変更するだけで簡単に利用できます。
実装は簡単です。
Stackiconsのフォントファイルを用意し、スタイルシートを外部ファイルとして、classを付与するだけです。
<a title="Twitter" class="st-icon-twitter" href="">Twitter</a>
各アイコンはclassを変更するだけで、フルカラー・単色・エンボスのカラーオプション、矩形・角丸・丸・なしの形状のオプションを利用できます。
ホバー時のエフェクトも用意されています。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022505.png)
さまざまなスタイルはclass変更するだけでOK
実装を試してみたい人は、下記ページでコードを編集することができます。
![サイトのキャプチャ](/wp-content/uploads-201401/2014022503.png)
アイコンは全部で75種類、企業サイトやブログなどでよく使うアイコンが揃っています。
Stackiconsはオープンソースで、個人でも商用でも無料で利用できます。
sponsors