CIKONSS-纯CSS实现的响应式Icon

什么是 CIKONSS？

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

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

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

下载： cikonss.css

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

general style: .icon (mandatory)

the size: .icon-small, .icon-mid, .icon-large, .icon-extra-large, .icon-huge (mandatory)

variant: .icon-square, .icon-rounded (optional)

...

子元素才是真正的icon实现

小号ICON

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

中号ICON

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


大号ICON

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


超大号ICON

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


巨型ICON

.icon-huge {
    font-size: 12em;
}

例子：

    
    方
    圆
    
    
    
    
    

库