多色图标
只有symbol方式支持。在symbol的引用介绍里有这样一句话“通过一些技巧，支持像字体那样，通过font-size，color来调整样式。” 在自己的实践过程种，发现font-size控制图标大小很容易实现，但是color调整颜色一直不成功。
几经研究，发现生成字体图标的SVG文件里包含了1个或多个path标签，而每一个path可以指定fill填充色，表现为该颜色填充整个path路径，但是一旦指定了fill属性，即使svg标签设置color，也不会改变path的颜色。详见下图：
可见：svg标签设置的color：red，并没有表现在图标上。
基于此，如果想修改字体图标某部分颜色，有3种方式：
- 由设计转化为SVG文件时，设置对应path不填充颜色或填充为#000000；
- SVG文件中找到对应的path，去掉fill属性，或者设置fill=”#000000”，再将该SVG文件上传转换成图标；
- 修改iconfont.js，找到对应的path，去掉fill属性。
在浏览器控制台的elements里打开，表现为下面的形式：
接下来就可以愉快的实现多色图标的颜色修改啦～
但是注意：只有未指定fill填充色的path（可以有多个）才能响应svg 标签的color。
其本质是：svg标签指定的color色 渲染在所有未指定fill填充色的子path上。
使用场景可以是：图标的正常态和高亮态。
渐变色图标
Unicode和font-class方式支持，建议使用font-class方式。
这里利用css3背景色的渐变来实现。灵感来自于大神张鑫旭的一篇文章《CSS3下的渐变文字效果实现》。先看效果：
其核心思想是下面三句话：
第一句：background: -webkit-linear-gradient(left bottom, #fb2c61 , #fac362); （通过CSS3实现背景色渐变效果。这里是从左下角至右上角的线性渐变。）
第二句：-webkit-background-clip: text;
（规定背景的绘制区域为文字部分。）
之前接触过的background-clip有下面几种取值：
background-clip: border-box（默认）｜padding-box｜content-box;
意思分别是，背景被裁剪到边框盒 | 背景被裁剪到内边距框｜背景被裁剪到内容框。
background-clip与box-sizing感觉有异曲同工之妙～
第三句：-webkit-text-fill-color: transparent;
（文字填充颜色）
＊这里注意一定要定义为transparent，否则会覆盖底部的背景色。
这里使用了-webkit-前缀，Chrome和Safari能够正常使用，经测试新版firefox也能正常使用。所以，如果有兼容性需求，这种方式就要谨慎使用了。
