• 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:

    1. Introduce iconFONT font library corresponding styles. <br>Copy the code
    2. 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.