字体图标怎么变成渐变色

字体图标渐变

字体图标想要变成渐变色的可以这样

.bg-blue{
background-image: linear-gradient(to right,#54cbf9,#3b9bef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

效果如图

TIM截图20181115102352.jpg

这样会有一个灰色的线，这个是字体图标的文字颜色。

{color:transparent}

TIM截图20181115102803.jpg

就可以完美的展示一个渐变色的字体图标了。