CSS图书馆 » HTML & CSS » ICONO – 仅一个标签实现的纯CSS图标

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

发表于: HTML & CSS. 评论
Sponsor

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

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

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

使用纯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/

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }