Wechat applet introduces iconfont icon

Method 1, Font class mode

  There are three modes in the upper left corner of the figure below, Unicode, Font class and Symbol. Select the Font class mode, then click the link under [Click to copy code], and copy the code in the link (as shown in Figure 2) to the project.
iconfont project page

code in the link

Method 2, Base64 mode

  I used the Font class mode before, but after the maintenance of the iconfont official website last week, when I added a new icon to update the code, the following prompt popped up, saying that it needs to be downloaded to the local use.

insert image description here

  I haven't used the local iconfont icon in the applet, so I went to Baidu how to import it. Some bloggers said that the applet does not support adding local font files, and it needs to be converted into Base64 format to import. The general steps are to download it locally first, then upload a file named iconfont.ttf in the downloaded file to https://transfonter.org/ , convert it into Base64 format, and then import it into the project. For details, see [here] 】 .

  I tried it twice, but it failed, and I don't know what I did wrong. But then I found out that the iconfont official website itself supports converting icons to Base64 format .

  You only need to check Base64 in the font format column in the project settings.
insert image description here

  Check Base64 and then download it locally. After decompression, copy the code in the iconfont.css file to the project.

insert image description here

Guess you like

Origin blog.csdn.net/dark_cy/article/details/125377005