Vue quoted Ali icon library

First to enter the official website http://www.iconfont.cn/

Reprinted: https: //blog.csdn.net/qq_34802010/article/details/81451278

Select the icon library

 

 

 

 

Inside choose your favorite icons, Add to Cart (upper right corner), then click on the shopping cart add to a project downloaded to the local [online much this part of the tutorial, and simple official website interface is also well understood. ]

The downloaded archive decompression locally. You do not need a green arrow, only the red and yellow box.

 

 

 

 

Vue project to find a path in assets path of the new folder Iconfont, copy and paste into the project file [name] of personal

 

 

 

 

Modify main.js: import './assets/Iconfont/css/iconfont.css' (note path problem) uses its own [path] iconfont.css

 

 

Modify the file path: The four files are an absolute path needs to be modified.

 

Modify the path in the iconfont.css     

note:

url ( 'data: application / x-font-woff2; charset = utf-8; base64, d09GMgABAAAAAAKUAAsAAAAABlw) does not need to change the path

 

Starting with the figure can not be added relative path I want, is some pictures online url (iconfont.woffXXXX) ← ​​This way, you can set a relatively straight path, so I will direct woff CSS files together, this is possible.

 

 

 

 

FIG path after the above change ↑

Then you can directly call up

Like this:

<I class = "icon iconfont"> & # xe63e; </ i> called directly from the demo;

 

PS: If you have problems in the following figure:

 

 

 

 

Solution: npm install css-loader --save