So without further ado, let’s go to the next step

Step 1: Openwww.iconfont.cn/

Search within the desired icon, for example: “company”; Click on what you see to add to the shopping cart

If you don’t have your own project here, you can create a new project of your own. After the project is successfully created, add the icon of shopping cart to the project

Or the company UI sister designs their own ICONS and lets them export them to you in SVG format

This is where you can upload successfully. The icon of the store in Figure 2 was uploaded by himself

Now that we’re done with the preparation, it’s time for step two

Step 2 Select Font Class to download locally

Downloaded files to be included in the project, first of all the assets under the SRC project to create a new folder ICONS, can define your own name, built and put into the downloaded files And then to the main. The js inside the introduction of the import ‘. / assets/ICONS/iconfont. CSS ‘

[class^=”el-icon-cc”],[class*=” el-icon-cc”] [class*=” el-icon-cc”]

(Unnecessary step) To avoid duplicate names in the project, you can modify the prefix of icon by clicking project Settings in the main page of my project

For example,

The third step

Configure the icon under the Router folder to use it directly

If inside the page can also be used directly

<i class="el-icon-cc-xingzhuang"></i>
Copy the code

About the update

When the project has an updated icon, the iconfont will also have corresponding notification, just need to replace the updated document in the iconfont. CSS file, there is no need to repeat the download. As shown in figure