Iconfont icon, unless the use of Symbol type and download multi-color icon, otherwise can only be assigned to monochrome icon through color, if the introduced icon icon color is single, users will immediately feel visual fatigue.
As a result, many applications now use multi-colored SVG to enrich their ICONS. It now takes only three lines of code to achieve ICONS comparable to multicolored SVG.
Let's take a look at the monochrome iconfont icon downloaded from iconfont
The introduction of iconfont
I'm not going to describe this step, but there are tutorials on iconfont
Train of thought
Since the iconfont introduced uses text colors, all colors are assigned by color, so we just need to figure out how to change the gradient text color. We can change the background of the entire box to gradient, then make the text color transparent, and then make the gradient rendering position only on the text. This should enable iconFont tween.
The first step is to add a background color
The gradient of the background
The gradient used in this article is
background-image: linear-gradient(225deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); Copy the code
A gradient site is recommended to change the colors you need
Now your icon looks like this
Second, change the text color to transparent
Change the color to transparent, so that the iconfont icon color is not affected by color
color: transparent; Copy the code
Step 3: -webkit-background-clip
The most magical step comes when you set the background's drawing scope to text
-webkit-background-clip: text; Copy the code
At this point, the background color render range is only valid within the text
The result is an Instagram-style icon with a monochrome Iconfont that is less expensive to work with and more enjoyable to watch
The CSS style used is only three lines
color: transparent; /* Change iconfont color to transparent */ -webkit-background-clip: text; */ background-image: linear-gradient(225deg,#4158D0 0%, #C850C0 46%, #FFCC70 100%); /* Your gradient */ Copy the code
Use the project unexpectedly beautiful and practical, just need to want what kind of gradient background, you can change iconfont icon to a variety of styles, do not mention iconfont, only think of the shortcomings of monochrome (multicolor SVG except ?), you see if this article is helpful to you, hope to gain a thumbnail support ?.