顶部

用法

在html文件的head标签内容引入 cikonss.css 文件，如下：

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

现在就可以直接使用了，cikonss共有43个icon，5种尺寸、3种样式。每个icon都是由两个 <span> 元素构成。父元素定义如下： 

<span class="icon icon-small icon-square">...</span>

子元素才是真正的icon实现 -- 可以使用的class在 预览 部分。每个icon的组织形式必须如下：

<span class="icon icon-mid"><span class="icon-mail"></span></span>

上面的代码效果如下：

样式是可选的：

<span class="icon icon-small icon-square"><span class="icon-mail"></span></span>

上面的代码效果如下：

案例

小号icon
.icon-small {
    font-size: 1em;
}

查看所有样式的小号icon

中号icon
.icon-mid {
    font-size: 2em;
}

查看所有样式的中号icon

大号icon
.icon-large {
    font-size: 4em;
}

查看所有样式的大号icon

超大号icon
.icon-extra-large {
    font-size: 8em;
}

查看所有样式的超大号icon*

* 此尺寸的icon对于小于480px宽度的屏幕就显得太大了。
巨型icon
.icon-huge {
    font-size: 12em;
}

查看所有样式的巨型icon*

* 此尺寸的icon对于小于550px宽度的屏幕就显得太大了。

关于

什么事 Cikonss？

Cikonss是利用纯CSS技术构建的响应式、跨浏览器的icon。所说的“跨浏览器”是指IE8+。这意味着必须使用CSS2，因此，可以绘制的形状或图形就收到了限制。

某些icon必须有 border-radius 属性，这主要是为了在支持此属性的浏览器上更好的绘制icon，而且不会影响到不支持此属性的浏览器。

Why have I done this?

Well, this was an experimental idea. I like to use css instead of images and graphics whenever it is possible.

It's a kind of fetish..

Then again, I like to have the smallest possible amount of media queries in css files. Playing with css responsive icons seemed like the next logical step.

Again, why have I done this?

Everything I know about web, more or less, I have learned from wonderful open source community. This is a very humble attempt to give something back.

I hope you'll enjoy using Cikonss at least as much I enjoyed crafting them.

Cheers!

Who am I?

I'm a professional classical musician, a webdesign-css-html-jQuery-php-cms lover. In general, web fascinates me and completely fulfils my need for constant learning and experimenting with art and mathematics.

My name is Milana Cap but you can find me on web usually as "zzap". If you are coming from English speaking area then you have pronounced my last name very wrong. Hence "zzap".