问题原因：该部分svg图标带有fill属性，不能直接通过css 修改fill属性。
解决思路：一、移除默认颜色(去色操作)；二、利用CSS3滤镜filter中的属性drop-shadow。
思路一：移除默认颜色(去色操作)
- 用编辑器打开.svg文件，搜索fill="#xxx" ，删除后即可通过css进行修改。
- 或者将如下代码删除即可。
<defs>
<style>
.cls-1 {
fill: #xxx;
}
</style>
</defs>
- 在iconfont.cn上，选中项目中的文件，应用批量操作 -> 批量去色。
思路二：通过CSS3滤镜filter中的属性drop-shadow改变svg的颜色。
// 通过img引入的svg文件。
// 此时css对svg文件无法生效，要用到CSS3滤镜filter中的drop-shadow，通过生产一个可指定颜色的阴影放置于svg的位置，并将原始svg移出视线
<img src="img/success.svg">
img{
position: relative;
left: -80px;
filter: drop-shadow(#fff 80px 0); // 投影颜色
}
svg {
fill: currentColor; //currentColor为css变量，自动读取当前元素颜色
}
drop-shadow相关：
要使用标准的 css3 实现某元素的投影效果，有两个方法，第一个就是使用常见的 box-shadow ，第二个就是使用 css3 的 filter 阴影滤镜 drop-shadow。
- filter 中的 drop-shadow 与 box-shadow 有同样的参数值，但表现效果有差异。drop-shadow没有内阴影效果；drop-shadow不能阴影叠加。
- drop-shadow滤镜可通过给元素或图片非透明区域添加投影改变png小图片颜色。
原理如下：
对于背景透明的 png 小图片而言，如果我们施加一个不带模糊的投影，等同于生成了另外一个颜色的小图片。
我们把原始图片隐藏在容器外面，投影图片在容器中间，给人的感觉就是换了颜色的图片。
然后，来一个向左偏移，再来一个 overflow:hidden 原图就隐藏掉了，只剩下一个投影图片。
Q&A
1、在 Chrome 浏览器下，drop-shadow 有一个如下的呈现特性：
在 Chrome 浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其 drop-shadow 是不可见的。
实体部分哪怕有 1 像素可见，则 drop-shadow 完全可见。
所以：
- text-indent 负值隐藏原始图，无投影，失败
- clip 剪裁隐藏，无投影，失败
- margin 负值隐藏原始图，无投影，失败
- left 负值隐藏原始图，无投影，失败
通通不行，实现遇到了巨大的阻碍。
后来想，如果我实体部分也在可视区域内，但是是透明的，会怎样呢（反正不会有投影出来）
于是，就尝试了经常带来意外惊喜的透明边框，结果是可喜的
因此，下面这一个 css 声明式千万不能少的：
border-right: 20px solid transparent;
关于兼容性
IE13+ 支持，Chrome 和 FireFox 浏览器支持，移动端 ios 支持，Android 4.4+ 支持。也就是，基本上，移动端现在可以使用这种技术了。
另：
filter: grayscale(100%); //grayscale是一个将图像转换为灰度图像的函数
