Two solutions to element's use of custom icon icons

When writing a project, I realized that the icon in element doesn't have the icon I need.

Two scenarios:

① Simple replacement of small icons, without the requirement of color change in the selection.

② Slightly more complex requirements such as color change in the selection.

First case solution:

Modify the small icons that come with the Element UI and replace them with your own.

First find that self-contained icon class, then the code is as follows

.el-icon-sunrise {
    background: url('Path to your image') center center no-repeat;
    background-size: 24px;
}
 
.el-icon-sunrise:before {
    content: "11";
    visibility: hidden;
}

Second scenario solution:

It's time to goAlibaba Icon Vector LibraryFound the icon I needed.

Alibaba Icons Vector Gallery :./collections/index

If you have not logged in, please log in (I usually use microblogging to log in), if you have not registered, follow the steps to register on it, logging in to complete the next step you can go!

Step 1: Select the icon you need, click Add Cart, add and then click on the top of the shopping cart, the steps are shown below

Step 2: After clicking on the shopping cart above in the first step, the following page will pop up, click Add to Project

Step 3: In the second step click to add to the project after the following chart, if there is a project directly click on the OK can be, if there is no project, click on the chart to show where the

Step 4: After clicking in step 3, as shown below

Step 5: After clicking OK on the upper side, the following interface will pop up

Step 6: Follow the diagram below

Step 7: After clicking Settings in the project, the following screen will pop up

Step 8: Make minor changes to the content as shown below

        1. Modify the FontClass/Symbol prefix.el-icon-

2, the Font Family iselement-icons

After the modification as shown in the figure below

Step 9: Click Save, it will jump to the interface shown below, click Download to local

Step 10: After the download is complete, it will be a zip archive Unzip it to the project folder where you want to use this icon

Inside the folder it looks like this, later you need to introduce the

Next step:You need to introduce this folder in the (write the path where your folder is located)

Finally: you need to select the Font class in the iconfont and then copy the name of the icon to use it, as shown in the following operation

Just paste it wherever you need it in your project

It's done.

summarize

to this article on the use of custom icon icon to this article, more related element custom icon icon content please search my previous posts or continue to browse the following related articles I hope you will support me more in the future!