CSS2で作られたミニマルなアイコンセット「CIKONSS」

  • 2013-06-21 (金) 8:00
  • CSS

「CIKONSS」はCSSのみで作られたアイコンを提供するCSSライブラリです。画像でもフォントでもありません。純粋にCSSのみで作られています。

CIKONSS

screenshot294

CSSのみで作られているメリットはやはり画像やフォントの読み込みが不要である点でしょう。その分レスポンス時間が改善します。ただCSS3などを駆使されて作られるとクロスブラウザ対応が全くできません。特にIE8以下は全く予期しないアイコンが表示されるでしょう。それなら画像やフォントを使ったほうが断然良いです。
その点「CIKONSS」は問題ありません。CSS2までの技術で作られており、IE8含むクロスブラウザ対応がしっかりなされています。

 

「CIKONSS」は”font-size”でアイコンの大きさを調整できます。smallサイズまで小さくすると少し不恰好にずれてしまっていますが、解像度も落ちずくっきり表示されます。これもCSSで作られたメリットですね。

screenshot297

 

それでは実装方法をご紹介します。まずは外部ファイルを読み込みます。

<link rel="stylesheet" href="cikonss.css">

 

HTMLはspanタグで設置したい箇所にマークアップします。今回は”.icon-phone”を試してみます。

<span class="icon icon-mid"><span class="icon-phone"></span></span></body>

 

CSSはあえて指定せず、デフォルト(1.5em)を使いました。

.icon-phone {
  font-size: 1.5em;
}

 

するとこのようにアイコンを作成することができました。

screenshot298

 

とても簡単に使えて、ミニマルなアイコンデザインがかっこよいです。ぜひ参考にどうぞ。

 

Home > CSS > CSS2で作られたミニマルなアイコンセット「CIKONSS」

Return to page top