Website (www.iconfont.cn/)

Bookmark the appropriate icon to your shopping cart and then generate the project to view the icon code, font code, Symbol code, and Unicode references in the class

1. The font – class reference

  • Good compatibility, support ie8+, and all modern browsers
  • It is more intuitive to write than Unicode. It’s easy to tell what the icon is
  • Because you use class to define ICONS, you only need to change the Unicode reference in the class to replace the icon
  • Multicolor ICONS are not supported, however, because they are essentially fonts

1) Save the ICONS you need in your project on the official website

2) Click download to local, decompress the downloaded files, and copy all files inside to the iconfont folder under assets of the project. The following figure

3) Introduced in app.vue, which is equivalent to global configuration

<style lang="less">
@import '~@/assets/iconfont/iconfont.css';
</style>
Copy the code

4) It can then be used in projects

1. The unicode references

  • Best compatibility, support ie6+, and all modern browsers
  • Support to dynamically adjust icon size, color and so on according to the font
  • But because it is a font, it does not support multicolor. Use only monochrome ICONS on the platform, even if there are multi-colored ICONS in the project, the color will be automatically removed

1). Repeat steps 1 and 2 above

2). Directly used in the project

3) effect

There is another way (symbol), but I haven’t tried well for the moment and have the chance to make up for it