ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近はWeb Fontに人気が集まっています。それまでは一つの画像にまとめてスプライトしていたので、アイコンの使い方も移り変わりがあるようです。さらにSVGを使ったアイコンというの選択しもあります。

大事なのはバイナリからベクターベースになってきているという点で、さらに軽量さを求めるようになっています。今回はその一例としてiconoを紹介します。

iconoの使い方

iconoの一例です。特徴としてすべてスタイルシートで作られている点があります。
iconoの一例です。特徴としてすべてスタイルシートで作られている点があります。

こんな感じで指定すべきクラス名が出ます。
こんな感じで指定すべきクラス名が出ます。

実際の使い方です。

<i class="icono-mail"></i>
<div class="icono-mail"></div>
<span class="icono-mail"></span>
<whatever class="icono-mail"></whatever>

このように指定してアイコンが出ます。画像ではないので軽量ですし、拡大しても綺麗です。さらにJavaScriptを使っていないのでCSS3に対応したブラウザであれば大抵表示できるでしょう。色もカスタマイズするのは容易です。

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

icono

saeedalipoor/icono

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2