Text link – wechat applet uses font icon

Download the font icon

First enter Iconfont- Alibaba vector icon library, and then search for the icon you want to small program icon as an example (I am relatively lazy on a direct map to solve, hey hey)

  1. Search for applets ICONS

  2. Click Add to library

  3. Click on the shopping cart icon in the upper right corner

  4. Click the download code button

The download directory is as follows:

2, convert TTF file (important point)

  1. Enter thetransfonterPlatform, the specific operation steps are as follows:

The download directory is as follows, with the focus on stylesheet.css

Three, in the small program use

  1. Open thestylesheet.cssAnd copy everything in it toapp.wxss

  1. Open previously inIconfont- Alibaba vector icon libraryDownload the file foundiconfont.cssAnd open copy the following code (forget the above, we just need to have the pseudo-class selector:beforeAll CSS) toapp.wxss

Note: I here are copies toapp.wxss, you don’t have to copy it (after all, there is only one icon), you can also use it@importThe introduction of
  1. inindex.wxmlIs recommendedtextTag and then add the correspondingclassClass names are used as followshtmlUse the font icon as: passfont-sizeChange the size,colorChange the color

Note: The picture is a small program, if you want to see the player or see here Gayhub address nuggets address