阿里字体图标symbol引用
阿里字体图标的使用有三种方式（unicode引用、font-class引用和symbol引用），本文重点讲述symbol引用的方式，网络也有其他的博客讲解了symbol引用的方式，但是都没有效果，今天踩坑了来记录一下。
这种用法其实是做了一个svg的集合
1. symbol字体特点
支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过font-size,color来调整样式。兼容性较差，支持 ie9+,及现代浏览器。浏览器渲染svg的性能一般，还不如png。
2. 使用方式一（在线引用）
首先要把多色图标放入项目中
【图标在其他地方是不能使用symbol方式的】
复制 symbol链接
【这种方式在本地测试时是无效的，要放在服务器环境使用】
【没有链接时点击生成】
在代码中引入（注意前面加https:）
<html><head><script src="/t/xxxx.js" type="text/javascript"></script></head></html>
加入通用css代码（引入一次就行）
<html><head><script src="/t/xxxx.js" type="text/javascript"></script><style type="text/css">.icon {width: 10em;height: 10em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style></head></html>
挑选相应图标并获取类名
【这里的类名不能修改，不然修改后要重新获取在线链接js文件并引入】
在代码中使用图标
<div><svg class="icon" aria-hidden="true"><use xlink:href="#icon-weibiaoti-1"></use></svg></div>
效果【没有，因为本地演示不了，想看效果往下看】
3. 使用方式二（本地引用）
直接把图标加入购物车
下载代码
把下载下来的压缩包解压，复制里面的 js 文件
粘贴到项目里然后引入
<html><head><script src="icon/iconfont.js" type="text/javascript"></script></head></html>
然后后面的步骤跟前面方法一样加入通用css代码（引入一次就行）
<html><head><script src="icon/iconfont.js" type="text/javascript"></script><style type="text/css">.icon {width: 10em;height: 10em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style></head></html>
挑选相应图标并获取类名并在代码中使用图标
<div><svg class="icon" aria-hidden="true"><use xlink:href="#icon-weibiaoti-1"></use></svg></div>
接下来看效果
【加个背景色并设置字体大小，至于修改字体颜色需要修改svg里的fill属性，不能通过css操作】
<style type="text/css">.icon {width: 10em;height: 10em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}.attr {background-color: #ccc;font-size: 18px;}</style>================================================================================================================================================<div><svg class="icon attr" aria-hidden="true"><use xlink:href="#icon-weibiaoti-1"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-weibiaoti-1"></use></svg></div>
