对于图标使用，当前用得最多的还是雪碧图和iconfont的方法吧, 另外还有将小图转为base64直接引入到css文件，逐渐流行的还有svg图标。

sprite 雪碧图

而雪碧图的用法又有多种，我们现在用得比较多的是类似gopng 这种半自动的用法（结合scss，又有些小技巧），还有我们使用gulp后，留意到有更方便快捷的全自动式用法（gulp sprite)。

iconfont 图标字体

iconfont的用法也有多种，最常用的肯定是在iconfont.cn来生成处理，但个人觉得这里不好维护。后留意到http://fontello.com/ 这个站点，觉得会更好用一些。然后最新发觉icomoon 除了处理SVG，生成iconfont也是挺赞的，值得一试。

base64图片

gulp其实有插件直接将放在对应css引用的图片转为base64，你可配置任务时设定例如小于2KB的图都执行这个操作。另外也可以手动用在线的一些站点要转换。

SVG图标

关于svg图标也是有不同的用法的，例如直接引入svg图片，把图标整合到1个svg文件，再直接加载到页面，或是通过js引入，然后通过ID来调用。成单APP有开始使用这个方法。

还有一种用法是类似base64用法的，也是本文想要特别介绍的。

用法很简单，如下就可以作为背景图

当然也可以在html以img引入

也可用加到css伪类。

优点：比base64图小得多，矢量图不失真！
缺点：如果是作为背景图，不能用样式控制填充色(fill), 这点没有SVG图标的用法灵活…
总的来说，这个用法还是挺有意思的，目前在企业理财H5使用，未知有没特别兼容性问题。