前言

iconfont的图标，除非使用Symbol类型且下载多色图标，否则只能通过color赋给单色图标，如果引入的icon图标颜色单一，使用者马上就会觉得视觉疲劳。

因此现在许多的应用都用多色的svg来使图标丰富化。现在只要三行代码就能实现媲美多色svg的图标。

我们先来看下从iconfont上下载的单色iconfont图标

引入iconfont

这一步就不做描述了，iconfont上都有教程

思路

由于引入的iconfont使用的都是文本颜色，颜色都是通过color来赋值的，所以只需想下怎么修改渐变文本颜色即可，我们可以通过给整个box背景改为渐变色，然后将文本的color透明化，再让渐变色的渲染位置只位于文本，这样应该就可以实现iconfont渐变了。

CSS

第一步，添加背景色

背景的渐变色

本文使用的渐变色是

background-image: linear-gradient(225deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

这里推荐一个渐变网站，方便修改你需要的颜色

此时你的图标是这样的

第二步，将文本颜色改为透明

把color改为透明的，这样iconfont图标的颜色就不会受到color的影响

color: transparent;

第三步，-webkit-background-clip

最神奇的一步来了，设置背景的绘制的范围为文本

-webkit-background-clip: text;

此时背景色渲染的范围仅在文本内生效

这样就完成了instagram风格的图标，只需使用到单色的iconfont，人工成本降低了，观赏性也变高了

总结

用到的css样式只有三行

color: transparent;                             /* 将iconfont的颜色改为透明 */
-webkit-background-clip: text;                  /* 将背景图的绘画仅作用在文字上 */
background-image: linear-gradient(225deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);     /* 你的渐变色 */

用到项目中意外的好看且实用，只需要想要怎样的渐变背景，就可以把iconfont的图标改成多种风格，不用一提到iconfont，就只想到单色的这个缺点（多色SVG除外🤣），各位看官如果本文对你有帮助，希望能收获一个点赞支持💗。

往期文章推荐

SVG超简单实现豆瓣loading动画

如何根据背景颜色动态修改文字颜色