1. Log in to the official website of Alibaba Icon Library, create a project of your own, and add or upload the corresponding svg image to the corresponding project, as shown in the following figure:
2. Click the [Download to Local] button to download the folder;
3. Create a folder iconfont in the src/assets directory of the project, and paste the file downloaded in the second step into the iconfont folder (note that you only need to import the corresponding style and icon font, and you can also customize it yourself The usage of the project imports the corresponding file):
4. Introduce the font icon style in main.js:
| 1 |
import './assets/iconfont/iconfont.css' // import font icon style |
5. The use of font icons (you can directly change the color and size of font icons by defining color and font-size):
| 1 |
<i class="iconfont icon-arrow-left"></i> |
Among them, iconfont is the default Font Family of the font, icon- is the default prefix of the font, and arrow-left is my custom icon class. If you want to change iconfont and icon- to other, you can do it in the Alibaba project EDIT MODIFICATION:
