html i标签css 图标,ICONO – 仅一个标签实现的纯CSS图标

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

1月 29, 2015

评论

Sponsor

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

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

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

使用方法

STEP 1:嵌入CSS文件

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

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

i.heart{color: red;}

兼容性

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

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站