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

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

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

サイトのキャプチャ

Stackicons

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

サイトのキャプチャ

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

サイトのキャプチャ

Stackicons - Example

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

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

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

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

サイトのキャプチャ

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

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

サイトのキャプチャ

Stackicons - CodePen

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

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

sponsors

top of page

©2024 coliss