For the front end, it is very common to use ICONS in the project. The current project technology stack is Vue family bucket with Element-UI. Since the icon provided by Element-UI cannot fully meet the needs of the project, we decided to use the IconFONT icon library provided by Ali.

1. Prepare ICONS to be used

Log in ali Cloud vector icon library, you can create a new project, select a suitable icon to join the project, or upload icon to iconfont icon library by UI little sister. Below is the company UI staff uploading all ICONS to the Iconfont icon library.

2. Use iconfont

You can use the online address or download it to use locally. I recommend using locally, because the icon will not disappear even if you are not connected to the Internet. Font class is recommended for Unicode, Font class, and symbol. We need to download the font library and put it into the project. We just need to use class to call the icon, which uses the before pseudo-element to display the icon.

1. Download and get a package, open this package, in addition to the demo other files are useful.

2. Create an iconFont folder in the SRC => Assets folder of the project and place the useful font files in this folder.

3. In the main.js file of the project, import iconfont.

4. In the iconfont. CSS file records all our fonts, directly use the class, that is, the selected part of the red box.

<el-button type="primary" class=" BTN ">< I class="iconfont icon-mobanguanli"></ I >Copy the code

6. The rendered effect is as shown below:

In this way, the icon is generated. If you need to adjust the size or color, just change its font size or color accordingly.

You can also use this icon in the left navigation menu

1. The index.js configuration on the router is as follows:

2. The rendered effect is as shown in the figure:

At this point, the steps for using the third-party font library in the VUE project are complete. If there are additional ICONS as the project iterations go on, continue to add them to the project, download the file to replace the original one, and then find the corresponding class name to use.