首先祭出大招，放上阿里巴巴的圖標庫首頁
https://www.iconfont.cn/
下圖是顯示的效果，使用的是圖標庫的svg格式的圖片文件
圖標庫給出了三種引用方式，我介紹的是第三種，通過引用js文件使用圖標
首先我們去圖標庫選一個心儀的圖標
然后添加到購物車，接着我們點擊右下角的購物車，可以看到我們選擇的圖標，接着點擊下載代碼（下載操作是需要登錄的，這時候我們進行登錄操作就好了）
然后我們就得到了這樣式的目錄文件
我們打開Html頁面
我講解的是一種Symbol引用的方法，官方在這里也給出來了怎么引用的，也可以參考這里，圖標下#開頭的鏈接就是我們需要使用的圖標鏈接，我們在頁面使用的時候，放入這個鏈接就可以顯示圖標了
首先在我們的項目里新建一個icon文件夾，然后把文件夾中的js文件扔進去
完成之后，我們在index.html文件里新加一行代碼
<script src="./static/icon/iconfont.js"></script>
完成之后，進入我們的頁面，在頁面新增一個svg標簽
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xin"></use>
</svg>
刷新我們的頁面就可以看到我們設置的矢量圖標了
隨之而來的問題就是，要是我需要很多圖標豈不是要一個一個下載，想想就感覺很廢，不過這個問題阿里圖標已經完美解決了，我們需要做的就是設置下就好了
首先，我們在選擇好圖標到購物車之后，選擇下方的添加至項目
新建一個項目文件夾，然后點擊確認，系統會自動跳轉到我們的圖標庫位置
這時候我們選擇Symbol的選項，生成鏈接，可以為我們項目的所有圖標生成一個js文件鏈接，我們復制這個鏈接，放到index文件里
<script src="//at.alicdn.com/t/font_2211729_lntvqn9rnu.js"></script>
若是需要使用圖標的話，選擇圖標，復制代碼，然后把代碼放到svg標簽里，就可以看到我們使用的圖標了
提示：
圖標使用項目里的鏈接之后，不能刪除項目，否則圖標無法使用
為了防止網絡不通或者項目刪除圖標不顯示的問題，我們可以把我們項目里的圖標打包下載到本地
然后打開html就可以看到我們項目里面的圖標，這時候我們只需要把這個js文件放到項目里，在index.html引用就可以在項目里使用圖信息了
