详细介绍vue项目中应用阿里巴巴矢量图标库

• 列表项目

首先进入阿里巴巴矢量图标库的官方网址：
http://www.iconfont.cn/home/i...

1、选择其中一种方式登陆。

2、点击导航栏上面的“图标管理”新建项目

新建项目会弹出一个弹出框

3、返回图标库，挑选开发中须要用到的图标，并加入购物车
能够经过搜索框搜索关键字，快速找到对应的图标

1.加入购物车

2.添加至项目

3.生成代码

回到以前建立的项目，生成代码应用

4、将图标应用到vue项目

1.在vue项目中的 index.html 中引入

<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_865116_8kkzkcginir.css"/>

2.插入图标，用i标签，前面的选择器“icon iconfont”必需要有，后面才是复制选中的图标的代码

<i class="icon iconfont icon-changjingguanli"></i>

若是想更改这个图标的颜色，大小等其余样式，能够直接用改变其样式

.icon-changjingguanli{
    color:red;
    font-size:16px;
}

5、图标会根据项目的开发需求，不断的增长，因此须要更新代码

1.更新代码

2.把更新的代码更新应用在index.html上

<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_865116_1u9wjcyhglc.css"/>

3.插入新图标与以前步骤相同