前言
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除外🤣），各位看官如果本文对你有帮助，希望能收获一个点赞支持💗。
