阿狗工具

问题原因：该部分svg图标带有fill属性，不能直接通过css 修改fill属性。
解决思路：一、移除默认颜色(去色操作)；二、利用CSS3滤镜filter中的属性drop-shadow。

思路一：移除默认颜色(去色操作)

1. 用编辑器打开.svg文件，搜索fill="#xxx" ，删除后即可通过css进行修改。
2. 或者将如下代码删除即可。

  <defs>
    <style>
      .cls-1 {
        fill: #xxx;
      }
    </style>
  </defs>

3. 在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。

1. filter 中的 drop-shadow 与 box-shadow 有同样的参数值，但表现效果有差异。drop-shadow没有内阴影效果；drop-shadow不能阴影叠加。
2. 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是一个将图像转换为灰度图像的函数