Moment For Technology

Change the monochrome iconfont to Instagram-like in three lines of code

Posted on Aug. 8, 2022, 5:36 p.m. by Cody Todd
Category: The front end Tag: css


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 ?.

Previous articles are recommended

SVG ultra simple implementation of Douban Loading animation

How to change text color dynamically according to background color

About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.