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

• 列表项目

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

一、选择其中一种方式登录。

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

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

三、返回图标库，挑选开发中需要用到的图标，并加入购物车
可以通过搜索框搜索关键字，快速找到对应的图标

1.加入购物车

2.添加至项目

3.生成代码

回到之前创建的项目，生成代码应用

四、将图标应用到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;
}

五、图标会根据项目的开发需求，不断的增加，所以需要更新代码

1.更新代码

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

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

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