之前对换肤就是改变css与img中的路径来进行切换，但是效果与打包后的文件都不理想。使用字体小图标只要改变CSS中的font-size和color就可以。
现结合其他资料对其进行小总结下：
优势
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像。这样可以减少HTTP的请求数量，而且和HTML5的离线存储配合，可以对性能做出优化。
灵活性：不调字体可以像页面中的文字一样，通过font-size属性来对其进行大小的设置，而且还可以添加各种文字效果，如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话！
兼容性：图标字体支持现代浏览器，甚至是低版本的IE浏览器，所以可以放心的使用它。
相比于位图放大图片会出现失真、缩小又会浪费掉像素点，图标字体不会出现这种情况。
劣势
图标字体只能被渲染成单色，或者是CSS3的渐变色
版权上也有着对应的限制，当然还是有很多免费的图标字体可以供我们下载。
当自己创作图标字体的时候，是比较耗费时间的，重构人员的后期维护成本也比较高
图标字体的制作
网址：https://icomoon.io
点击左上角的IcoMoon App
进入之后点击Import Icons把SVG图片上传上去
全选上传上去的图片，点击右下角的Generate Font
每个项目下都会有一个Get Code按钮，点击它会出现一个使用方法的弹窗
点击左上角的Preferences，在Font Name中设置生成字体的名称
设置好之后，关闭弹出窗口，点击右下角的Download按钮进行下载
打开下载好的压缩包，把fonts目录下的文件拷贝到任意目录下。之后就可以通过之前Get Code按钮下提供的使用方法进行使用。
三种都是矢量图（即放大不失真），但是各自又有各自的优缺点，
1.font awesome；
优点：相对比较简单，查看官网看例子基本上都会用 （http://www.bootcss.com/p/font-awesome/）
缺点：文件较大，影响加载速度
注意引用的路径和版本；
2.inconfont(阿里巴巴矢量图标库); （个人用的最多的一个）
可以缩放的矢量图标。你可以使用CSS对它们进行修改:大小，颜色，阴影等。体积特别的小。可能几百个图标才几十KB。
优点：
- 高清保真，因为是SVG图形
- 灵活性，可以设置大小，颜色等
- 兼容性好，支持IE6
- 开源的字体库很多
- 减少HTTP请求
缺点：
- 维护自己的字体库麻烦一些
- 图表字体只能被渲染为单色的
操作流程繁琐（自己上传的或者官网搜索的-------------- 加入购物车-------- 添加至项目（自己建的项目） -------项目文件下载到本地-------引用到代码中）
3.svg，（个人认为最好转化为iconfont字体小图标，）
优点：单个引用，比较灵活；
缺点：svg代码较长，使页面看起来丑陋；