URL:
vue using the tips of how to use the Alibaba vector icon library
Alibaba Vector icon library Description: Designer icon uploaded to Iconfont platform, users can customize a variety of formats download icon, the platform also convert icon fonts, easy and free to adjust the front-end engineers call.
Now it has icon is about to exceed 500 million.
URL: https: //www.iconfont.cn
This article will illustrate in detail for the small partners - Alibaba how to use vector icon vue in!
1. Open the Alibaba vector icon library website
![](https://ask.qcloudimg.com/http-save/yehe-1272076/tskdywkgr3.jpeg?imageView2/2/w/1620)
2, register and log in (slightly)
3, click on the icon management - "My project, and then create a project.
![](https://ask.qcloudimg.com/http-save/yehe-1272076/gil0nwsief.png?imageView2/2/w/1620)
4, add the information of new projects
![](https://ask.qcloudimg.com/http-save/yehe-1272076/xbtwftl3ph.png?imageView2/2/w/1620)
5, any search for an icon, such as "elementui"
![](https://ask.qcloudimg.com/http-save/yehe-1272076/1nkzu6tlho.png?imageView2/2/w/1620)
6, in the search results, move your mouse to your favorite icon, then click on the shopping cart (indeed Ali, do everything kind of tastes electricity supplier) will be your icon storage!
![](https://ask.qcloudimg.com/http-save/yehe-1272076/526x6wdzmq.png?imageView2/2/w/1620)
7, after storage, shopping cart icon in the upper right corner of the page there will be a red warning, click on it!
![](https://ask.qcloudimg.com/http-save/yehe-1272076/m92srtu81d.png?imageView2/2/w/1620)
8, then click on the "add to the project." After a good choice to join the project, click OK.
![](https://ask.qcloudimg.com/http-save/yehe-1272076/ryzmbps613.png?imageView2/2/w/1620)
9, will be downloaded to your local icon.
![](https://ask.qcloudimg.com/http-save/yehe-1272076/vbmltp0png.png?imageView2/2/w/1620)
10, and decompress downloaded file as shown below:
![](https://ask.qcloudimg.com/http-save/yehe-1272076/ik61fanu99.png?imageView2/2/w/1620)
11, copy the file to the project (deleting the beginning of the demo files), my address is: src / assets / iconfont
![](https://ask.qcloudimg.com/http-save/yehe-1272076/fhj0lgyeq7.png?imageView2/2/w/1620)
12, Ali Baba introduced vector icon library in main.js
import "@/assets/iconfont/iconfont.css";
13, in the style in iconfont.css
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.iconelementui:before { content: "\e604";}
14、使用:
<template> <div id="app"> <i class="iconfont iconelementui"></i> </div></template> <style scoped> .iconelementui { color: red; font-size: 200px; } #app { text-align: center; }</style>
15, preview the results:
![](https://ask.qcloudimg.com/http-save/yehe-1272076/4ple6y7kzk.png?imageView2/2/w/1620)