给文字icon加上渐变效果

主要思路是写一个伪类定位给他设置遮罩层 （-webkit-mask-image）；我这里写的小程序

这是效果

代码如下：

content是你引入的icon 字体

 .iconfont{

  font-size: 180rpx;

  position: relative;

  margin-bottom: 34rpx;

  display: inline-block;

}

 .iconfont::after { 

    content: "\e603"; 

    color: #FD764D; 

    position: absolute; 

    left: 0; 

    z-index: 2;

    top: 0;

    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F4494B), to(rgba(253, 118, 77, 0.8)));

}