My project is Vue+element. Since there are few icons in this element, let’s introduce the icons of Alibaba Cloud.
Alibaba Cloud icon library address: https://www.iconfont.cn/home/index
First of all, you need to have an account of Alibaba Cloud icon library, if you don’t have one, register
At this point, we have completed the preparatory work, let's talk about how to introduce
The first step, create a new project
Click on Resource Management, My Project
New Project
The second step is to search for the icon you are looking for, then put the mouse on the icon you want, and add the changed icon to the shopping cart
Then add the icon to the item in the cart
Select an item, click OK
Then click on the font class in my project to download the icon locally
Unzip the downloaded compressed package, the contents of the file are as follows:
Open iconfont.css and modify the position
before fixing
After modification, add [class^="icon-"],[class*=" icon-"]
The class name here is consistent with the prefix name in my project properties
The third step is to put all the files in the modified folder into the icon directory under assets
The fourth step, import in main.js
The fifth step, use test
Copy the icon code and put it in the class
You can see that the icon has been displayed
Remember to like it after reading it