快用iconfont替换你的FontAwesome

发布于 / 网页制作 / 1 条评论

fontawesome,ionicons,google icons,,这些都是有名的、方便的、齐全的、图标框架,可是直到有一天我无意中看到了阿里家的iconfont,我毅然决然的投向了它的怀抱

首先是FontAwesome放在静态库里(可以参见我的另一篇文章关于静态资源库),很多关于图标的设置无法自定义,而放在本地资源或者云存储中,流量耗费时间一长又显得流量消耗过大

仅仅只是一个woff文件,140访问量就花掉了42MB,如果一天pv5000,就是1.5GB流量,又拍云1G流量0.29元,一个月13块钱,一个woff文件就花去13块钱

而在实际使用中,FA的图标数量庞大,大部分完全用不到,索引查找name也是一件蛋疼的事情。

反观iconfont:

图标支持三种下载方式,设置面板实用方便

索引快速,可找到大量不同图标包的文件

那么我如何使用阿里的这个iconfont图标库?

图标步骤开始

打开购物车

好,我们已经获得了这个图标的css

把上面//at.alicdn.com/t/font_881789_2two7hug83w.css这样一段代码 在你的页面中引入:

 <link rel="stylesheet" href="//at.alicdn.com/t/font_881789_2two7hug83w.css">

如何使用上面那个user图标?

 <i class="iconfont icon-steam"></i>

应该没什么问题了吧,这个教程不知道萌新看不看得懂www.iconfont.cn

转载原创文章请注明,转载自: 沧水的博客 » 快用iconfont替换你的FontAwesome
  1. LOVE

    谢谢!正好需要这个