1.前言

在實際開發中，作為前端開發人員的我們經常會遇到下面這種ui圖

我們看到在上面兩個平臺設計圖中的出現了大量的圖標，在某種情況下，這種圖標是需要我們自己去找的，不要噴我們的 ui 哈，主要是我喜歡麻煩 哈哈，如果ui提供我也是要求他為我們提供SVG格式的，至于為什么 下面會為大家講解。在這里呢我們遇到這種圖標可能會想到我們運用的框架中的字體圖標，像element-ui、iview-ui中都提供了icon圖標


上面的兩個ui框架中都提供了很多圖標我們至于要直接運用即可，但是在我們的開發需求中很多圖標是不包含在這其中的，很難找到一樣甚至相近的都很少，當然不包括那些按照ui庫進行設計的ui設計師，下面為大家介紹一款強大的圖標庫 阿里巴巴字體圖標庫iconfont

點擊進入官網

2.登錄或者注冊

點擊右上角角的頭像

隨意選擇一種方式即可

3.使用步驟

3.1 點擊我的項目

3.2 創建項目

上面的三步我們就創建了一個名為測試一的新項目，那下面我們就開始添加圖標了

3.3 添加圖標

我們就以掃一掃類的圖標為例，回到首頁搜索掃一掃，然后回車

我們可以看到僅僅掃一掃就為我們提供了255個圖標，是不是很全面

3.4 將圖標添加到項目中

我們將自己想要的圖標添加到購物車，然后擦從購物車中將圖標添加到項目中

添加后我們的項目中就擁有了我們需要的圖標，前面我說到如果我們找不到ui設計的圖標需要他提供的話 我希望他為我提供svg格式的 下面告訴大家原因

我們可以將ui提供給我們的svg格式的圖標上傳到我們的項目中，這樣的話方便我們統一進行管理，我們就可以將所有需要到的圖標都添加到我們的項目中后我們就需要將這些圖標添加到我們的項目中

3.5 將我們圖標項目運用到Vue項目

點擊下載至本地，然后在我們的vue項目中的assets文件夾下面新建一個icons文件夾，存放我們剛下載的圖標項目


將我們的文件移過來后，我們在main中進行簡單的引用即可

import ‘./assets/icons/iconfont.css’

下面我們就去我們需要用到的地方進行使用就好了

我們只需要在我們的vue文件中使用一個i標簽然后設置類名即可，類名的設置是根據我們下載過來的 iconfont.css中選擇的，

上面i標簽中的第一個類名 iconfont 是基礎樣式必填，后面的是我們的圖標樣式，也是我們css文件中的黃色框出來的是我們的三個圖標。看一下效果，

如果我將i標簽的第二個類名切換成其他的圖標 ，同時我們可以為i添加style設置樣式，簡單的顏色大小，因為我們是字體圖標所以設置大小顏色等演示都是跟設置字體相同

看一下效果

如果我們后面有添加的新的圖標是不是需要我們重新下載呢，并不是的我們只需要更新我們的iconfont.css文件即可

3.6 后續開發僅需要更新iconfont.css即可

在這里我們新添加了一個我的圖標

生成代碼

生成后我們點擊，打開源碼，復制

將我們Vue項目中的iconfont.css里面的代碼替換成最新的就可以了

我們的圖標就變成了四個 我們嘗試一下最新的是否有效

將i中的類名替換成我們剛添加的‘我的’圖標，看效果

大功告成，學會了嗎？