* 为图标格式选择做参考
优点：
图标制作多样性，适合有特效的多彩色的图标，更换频率高的；
缺点：
位图缩放时容易失真；文件较大，影响加载速度；增加安装包体积；
优点：
矢量图标，无论怎么修改尺寸都不会影响图片质量；
单个引用，比较灵活，可读性好，可直接被浏览器、搜索引擎SEO和无障碍读屏软件读取；
svg采用图形渲染清晰度高；节省请求时间；
svg可以做动画；
缺点：
svg代码较长，代码不美观；浏览器兼容性不太好；
优点：
用几个引几个，不会影响加载速度；加载速度极快；
可以将自己做的svg转换成iconfont字体文件，更加灵活；
修改尺寸颜色更加灵活方便不占用设计资源；
浏览器兼容性较好；
缺点：
只支持单色或CSS的渐变色；
不同浏览器兼容方式略有不同可能会影响到字体大小和设计尺寸的误差；
制作字体图标需要花费更多时间；
作为设计师我们追求的是更加完美，我们更希望是能够像素级还原；
而开发工程师更多的是关注设备兼容性、重构成本、性能及维护成本等等。
在早期页面中的图标随着Retina屏出现 时间的推移 未经重构的网站图标变的失真模糊，直接拉低了整个web页面的质量；
为了避免这种情况，我们还可以采用svg或字体图标(Icon Font)；
svg是矢量格式图标；iconfont是svg封装过的字体文件；这两种格式在哪种分辨率下都能完美显示；
在前端开发技术中已经慢慢淘汰了 img 和 sprties 处理图标的方式，
也就是在当今高清显示屏下已经在慢慢减少使用位图图标格式(分情况)；
横向和纵向拉伸区域要留出至少1px(但是尽量要大一些好设置区域)
特别注意纵向拉伸那个不要放置在右边突出箭头上了不然箭头也会拉伸；
横向和纵向显示区域是根据设计中字体上下左右留白得出来的；
1，先画图标
2，保存为svg格式
3，登录阿里巴巴图标库 iconfont
4，上传绘制的图标svg文件
5，在管理我的图标页面在图标上点击购物车小图标添加到库
6，点击菜单右上角购物车小图标在右侧弹窗中点击下载代码
7，在代码文件中可以看到生成的代码和字体文件
* 将下载的文件全给到开发就好
