URL:
vue using the tips of how to use the Alibaba vector icon library
Boosts the digital ecology, cloud product offers big promotion
Tencent cloud promotion, a nuclear 1G 99 yuan / 1 year, 2 nuclear 4G 1200 yuan / 3 years
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
2, register and log in (slightly)
3, click on the icon management - "My project, and then create a project.
4, add the information of new projects
5, any search for an icon, such as "elementui"
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!
7, after storage, shopping cart icon in the upper right corner of the page there will be a red warning, click on it!
8, then click on the "add to the project." After a good choice to join the project, click OK.
9, will be downloaded to your local icon.
10, and decompress downloaded file as shown below:
11, copy the file to the project (deleting the beginning of the demo files), my address is: src / assets / iconfont
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:
