今はWebサービスがたくさん存在します。そうしたサービスのアイコンを自分のサイト上に載せたいと思うことは多々あります。一番多いのはFacebook/Twitterなどのソーシャルサービスのアイコンや、GitHubのアイコンです。 画像でも良いのですが、大きさや色を変えたいとなるとWeb Fontsの方が都合がいい場合もあります。そんなニーズにぴったりなのがStackiconsです。

Stackiconsの使い方

基本はBootstrap/FontAwesomeと同じくスタイルシートのクラス指定です。

<i class="st-icon-twitter st-shape-square"></i>

st-shape-squareと付いているので分かる通り、この後ろを変えることで形を変更できます。

  • st-shape-icon:アイコンのみ
  • st-shape-square:四角
  • st-shape-rounded1:ちょっと角丸
  • st-shape-rounded2:角丸
  • st-shape-rounded3:強く角丸
  • st-shape-circle:円形

といった指定ができます。

アイコンのみ。

四角。

ちょっと角丸。

角丸。

強く角丸。

サークル。

さらに各表示において単一カラーではなく、マルチカラー指定があります。

マルチカラー!

これだけたくさんのアイコンに加えてさらにマルチカラー対応となると大変だと思うでしょうが、実際には各パーツ毎にフォントが分かれており、それを重ねて表示することでマルチカラーを実現しています。角丸や四角表示も同様で、基本はアイコン表示となっています。

Web Fontsと言えば管理が楽で、サイズが自由に変更できるというのがメリットでしたが、2色表現しかできない点が難点でした。Stackiconsは重ねて表示することでその限界を超えています。非常に面白いソフトウェアです。

StackiconsはWeb Fonts製、MIT Licenseのオープンソース・ソフトウェアです。

Stackicons - Icon Fonts for Web Designers

parkerbennett/stackicons