阿里巴巴矢量图标如何实现颜色渐变

前端font-class引用

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font.css">

使用

<i class="iconfont icon-xxx"></i>

设置渐变

1. 设置背景色渐变

background: -webkit-linear-gradient(90deg, #00FEF5, #B3EDF1);

2. 规定绘制区域为文字部分

background-clip: text;
-webkit-background-clip: text;

3. 文字填充色

-webkit-text-fill-color: transparent;

完整代码

.iconfont {
  font-size: 30px;
  font-weight: 550;
  background-image: -webkit-linear-gradient(90deg, #00FEF5, #B3EDF1);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

实现效果如图