The built-in icon library of Element-UI is still not complete enough, and there is still a need to introduce third-party ICONS. There have been some problems in my own use, so I refer to some tutorials to record and supplement them in detail

For us, the first choice is of course Ali Icon library

A tutorial.

1. Open the⇲ ali icon

Register > Login > Icon Management > My Project item

Icon Management > My Project, click in

2. Create a project item

Feel free to write the project name. Don’t use the same name as the icon (prefix: el-icon) that comes with Element-UI.

After setting, click New

Pay attention to prefixes. After setting, click New

3. Add icon

Now we return to ali Icon home page, click into the icon library you want, because there is no batch import shopping cart, so generally need to click one by one, too waste of time, so please input the following code in the console, batch import guide \

var icons = document.querySelectorAll('.icon-gouwuche1');

var auto_click = function(i) {
    if (i < icons.length) {
        setTimeout(function() {
            icons.item(i).click();
            auto_click(i + 1);
        }, 600); }}; auto_click(0);
Copy the code

Then hit Enter and he will add all the ICONS of this gallery to his shopping cart

Click the shopping cart on the page

Add the ICONS to the project you just created

4. Download the file to the local PC

Set fontClass and download it locally

Download it to the local PC and decompress it

When you unzip the file, open the file circled in the image

Use two.

1. Iconfont. CSS added style code

Add the following code, note: el-icon-third is the prefix of icon you set earlier. The second el-icon-third is preceded by a space \

[class^="el-icon-third"].[class*=" el-icon-third"]/* There is a space */

{
    font-family: "iconfont" ! important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
Copy the code

Just keep the numbers in the green box consistent

2. Copy the downloaded file

After setting up the above, I opened the vue project. I created the icon folder under Src-Assets and copied all the files over

Import CSS from main.js

Remember to bring in

Then NPM run dev again

3. Specific use

Open the project in Ali Icon and copy the icon code you want

Icon code: el-icon-ump-QIanniudaidise

Use, both references, the same way element is used

4. Final effect:

Whether you get it or not, I get it, Hahaha