ICONO – 仅一个标签实现的纯CSS图标

Sponsor

图标在WEB和APP设备上是很常用的设计元素，有些网站为了兼容高分辨率的显视屏，比如苹果Retina设备，一般使用网页图标字体或是SVG的图标，麻烦一点就是做多套不同大小的图标。除此之外，还有一个方案就是用CSS实现图标了。

今天向大家介绍一套使用纯CSS绘制的图标，只需要一个html标签就能实现，图标也是网站常用的ICON，所以可以尝试在你的网站项目上使用。

使用纯CSS编写的图标比其它图标体积小很多，虽然如此，但不少前端人员不愿意或不懂得用CSS绘制，而且还有兼容性问题。当然如果只需要兼容流行的浏览器，可尝试用ICONO这套图标。

使用方法

STEP 1: 嵌入CSS文件

<link rel="stylesheet" href="icono.min.css">

STEP 2: 给标签加上图标的class，如下例子：

<i class="icono-mail"></i>

<div class="icono-mail"></div>

<span class="icono-mail"></span>

<whatever class="icono-mail"></whatever>

TIPS: 如果想改变颜色，参考下面样式：

i.heart{color: red;}

兼容性

支持CSS3的浏览器一般都可以正常显示，比如IE9+, Chrome, Safari, Opera等。所以IE8是不支持了：）

下载和演示，请访问ICONO网站：http://saeedalipoor.github.io/icono/

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。