Use iconfont icons and color icons in vue projects

Use of monochrome icons

1. First download the selected icon to the local

2. Add the iconfont.css file and the file with the suffix .eot .ttf .woff .svg to the project folder

3. Import iconfont into the main.js file of the project. css style file,

import "./assets/styles/iconfont.css"

4. Note that in the iconfont.css file, modify the paths of the other four files referenced according to your own circumstances, otherwise an error will be reported.

5. The next step is to use it in the project. The monochrome icon directly uses the uniCode code corresponding to the icon, and adds to the label. iconfont class name is just fine

Use of color icons

1. Download the selected icon to the local as well.
2. You need to add the five files used by the monochrome icon and the iconfont.js file to the project folder at the same time, and import iconfont.js according to the path in main.js

import "./assets/styles/iconfont.css"
import "@/assets/iconfont/iconfont.js"

3. Add the following code to APP.vue

.icon {
    
    
   width: 1em; height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}

4. How to use: Write

the code corresponding to the multi-color icon where you need it, you can see it in index.html in the downloaded folder