Teach you step by step how to use font icons in mini programs

How to use font icons in mini programs? The following article will take a certain Alibaba vector icon as an example to introduce to you how to use font icons in mini programs. I hope it will be helpful to you!

#In the development process of WeChat applet, the use of icons is very common and common. Under normal circumstances, in the images directory of the WeChat applet project, you can directly reference the local icon file. However, when you set the background image by using the font icon or background, you do not need to reference the local icon file. You can only use the URL link. The font or picture of the address, or the format after encoding the ordinary icon using base64. [Related learning recommendations: 小program development tutorial]

Then this blog post will share how to use font icons in WeChat mini program projects, and convert the font URL into Method to use base64 format later. This case uses a certain Alibaba vector icon library as an example. The specific operations are as follows.

Operation steps

1. First open the official website of a certain Alibaba vector icon library, then search for the icon you want, and then click to select the "Add to Library" button;

#2. Go to the shopping cart to find the font you added, then click Select and select the "Add to Project" button in the bottom menu bar;

3. Click the "" button in the upper right corner, then enter the project name and click the "OK" button;

##4. Then go to the newly created project to find the added font, then click to select it, and click the "Download to Local" button to download it to the local computer;

5. Find the font file downloaded to the local computer, then open the file, open the iconfont.css file inside, and then directly Copy the url and iconfont methods, all styles, and paste them directly into the wxss file where you need to use the font icon;

#6. Finally, call it in the wxml file using the font icon.

Finally

The above case is explained based on the example of a certain Alibaba vector icon library. There are many website platforms for converting font icons, so other The platforms will not be introduced one by one. Interested developers can learn how to use other platforms. This is the method of using font icons in the development of WeChat applet in this article. I will share it with those in need and will not go into details here.

For more programming-related knowledge, please visit:

Programming Teaching! !

The above is the detailed content of Teach you step by step how to use font icons in mini programs. For more information, please follow other related articles on the PHP Chinese website!