三行代碼把單調的iconfont改爲instagram風

前言

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動畫

如何根據背景顏色動態修改文字顏色