uniapp introduces a custom icon library --- Alibaba vector icon library iconfont

I. Introduction

---

  Introducing font library icons iconfontcan improve development efficiency and project maintainability. The Alibaba vector icon libraryiconfont is undoubtedly one of the best choices, and today I will introduce uniapphow to introduce it elegantly.

2. Reference steps

1. Register and log in

• Register and log in on the official website

2. Create a project

• Resource management on the top operation bar -> My project -> New project
  

3. Search icons and add them to the library

• Search for an icon, add it to the library, and the selected icon will mark the selected number on the shopping cart icon in the upper right corner
  

4. Select the icon to add to the project

• Click the shopping cart icon in the upper right corner to add the selected icon to the item
  

5. Copy the generated CSS code

• Confirm to add the project, it will automatically enter the project
• Click on the red font暂无代码，点击生成
• After the code is generated, there will be a css link, click the link, it will open in a new window
  

6. Select all and copy to uniappthe project

7. Notes

• The network path must add a protocol header https. For details, please refer to uniapp-font icon
• unit changed torpx
  

8. Citing and using

• App.vuequoted in

<style lang="scss">
	@import "@styles/iconfont.scss";
</style>

• used in the file.iconfont className

<text class="iconfont iconrenshu"></text>

References

• Get Iconfont in one go
• Ali icontfontfunction introduction
• uniapp-font-icons