转载

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

图标在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/

交流：UI设计交流群：375537101（快速加入），与500名设计师交流设计，分享素材。

建议：看到好的文章或素材，记得分享到微博等媒体，让更多的朋友知道，也方便日后查阅。

正文到此结束

所属分类：编程技术

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。