-
preface
In normal development, sometimes in order to show some cool effects, but the display color is more rich, sometimes use a combination of colors to present, at this time will use the gradient icon, just when the icon in the project also used the gradient icon. So what are the ways to do that.
-
Use PNG/SVG images
This kind of method is relatively simple and crude, directly called UI screenshot can be quickly done, save trouble. Advantage: save trouble, do not exist what compatibility problem. Disadvantages: occupy a separate resource request, change colors and so on need to let the UI cut, for HD screen icon will appear jagged and so on.
-
Use iconfont, CSS3 gradient
Using iconfont:
-
Introduce iconFONT font library corresponding styles. <br>Copy the code
-
CSS processes the icon. <br>Copy the code
The specific code is as follows: HTML
-
<i class="van-icon van-icon-like like-linear-gradient"
"></i>
Copy the code
.like-linear-gradient {
background-image: linear-gradient(#01cdfe, #1f19fb);
-webkit-background-clip: text;
color:transparent;
}
Copy the code
Compatibility:
background-clip:
Advantages: Post replacement color, only need to change the gradient color carried out, iconFONT vector, no zigzag image. Disadvantages: Compatibility will be noted, linear effects are not so easy to tune.