之前在项目中遇到这样一个需求：同一个页面支持不同主题的换肤。对于背景色、文字颜色可方便的通过CSS实现；一些纯色小图标也可通过先转换为字体图标，再使用CSS来设置颜色、大小。而页面中的另一种元素——Logo是一个渐变色的图标，传统方式是将不同主题下的Logo分别切成图片再引入。这种方式的不便之处在于每新增一个主题，都得再次切图。于是乎想到，Logo能否也采用字体图标+实现渐变色，从而方便的使用CSS来设置颜色、大小？
在讲述上述问题的解决方法之前，这里先简单介绍一下传统小图标（如下图）会涉及到的几种使用方式。
传统：图片
最基本却也是最不好的一种方式，一个小图标就是一张图片，势必会加大HTTP的请求次数，这也是网站性能优化方向之一；且如果在移动端使用，还要考虑2倍屏、3倍屏问题。当然，最大的优点在于兼容性最好。
进一步：雪碧图（CSSSprites）
该方法是将网页中一些背景图片整合到一张大的图片中，再利用CSS的背景定位来显示需要显示的图片部分。
优点：减少加载网页图片时对服务器的请求次数，从而提高页面的加载速度；
缺点：小图标与小图标之间的距离要确定好，避免雪碧中相邻的图片被“露进来”；如果雪碧图足够复杂，则大大增加了CSS代码的编写和维护难度。
现在：字体图标
一种比CSS雪碧图技术更优雅的图标应用方式，比如说：FontAwesome、IcoMoon、Iconfont等。
优点：
图标矢量化，再也不用担心会在2倍屏、3倍屏下失真了；
本质上是字体，所以可以用CSS来灵活控制图标的大小、颜色、阴影等；
各大平台图标丰富，可方便找到自己需要的，如果有定制需求，可快速上传;
文件，转换为字体图标。
缺点：
多色图标的支持还不完善。
2以Iconfont为例讲述字体图标使用
第一步：进入Iconfont