//文字
.title {
background: -webkit-linear-gradient(180deg, #d6cbee 0%, #b9a6e1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
//icon(阿里巴巴矢量图)
.icon-close {
font-size: 16px;
background: -webkit-linear-gradient(180deg, #d6cbee 0%, #b9a6e1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
在阿里巴巴矢量图中,icon需要给到特定的色值,一般通过color设置,但是有些icon是渐变的,所以需要区别对待。
渐变色的icon需要在css中设置className并引入,纯色icon可直接在style中设置color。
<i className="iconfont icon-hudongguanli-zhuaquguizepeizhi" style={{ color: '#7041F8' }} />
<i className="iconfont icon-hudongguanli-zhuaquguizepeizhi linear-icon-1" />
.iconfont {
font-size: 20px;
line-height: 20px;
}
.linear-icon-1 {
background: -webkit-linear-gradient(180deg, #aae4c5 0%, #4fbb81 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}