詳細介紹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.插入新圖標與以前步驟相同