antd 引入自定義圖標字體庫!

圖標字體？SVG ？說到 SVG 又要長篇大論了！打住！SVG 我之後開單獨的一個知識庫來總結吧，這裏就一筆帶過了。如今咱們主要講的是怎麼在 antd 裏面引入自定義的圖標字體庫。Action ！

在這裏咱們講解的是用 IconFont 管理字體圖片。

根據 [http://www.iconfont.cn/](http://www.iconfont.cn/) 地址打開網頁以下：

在進行接下來的操做以前，但願您已經登入系統了。不然全部的操做都將沒法進行！

在首頁輸入框，搜索所需的圖標字體的名稱，若您有本身的圖標字體在本機環境，也能夠切換到上傳模式，上傳本機的圖標字體（ 後綴是 SVG ）文件。

若您的 team 或者 公司在該系統上有本身的項目組，能夠叫相關負責人將您拉進組內，這樣您就可使用項目組內全部的圖標字體。這樣一個項目組能夠作到 team 圖標字體共享，很是很是實用。

接下來就是具體的操做了！

鼠標移到您看中或者須要的圖標字體上，會出現透明的操做層，點擊加入購物車，固然這裏不是真的去花錢購買。而後看到右上角的購物車裏會出現剛纔選中的圖標字體。

接下來的內容很重要，請謹慎操做！

在圖標管理裏面進入個人項目頁面

先在新增本身的項目，用於將剛纔選中的圖標加入項目。

下面的表單填寫必定，必定，必定要謹慎！

項目名稱本身隨意填寫，最好是見名知意的那種。圖中畫紅框的 FontClass/Symbol 前綴 一欄要填寫，UI 框架所使用的圖標字體的前綴，好比 antd 用的是 anticon。這裏咱們就要填這個了，其餘的框架，本身去找找！

相似

<i class="anticon anticon-home-c"></i>
複製代碼

最後咱們爲一個圖標起的名稱是 home-c，系統會生成 anticon-home-c 的類名。

項目描述可填可不填，Font Family 一欄，若是本身沒把握就不動，其餘的不重要了。

點擊右上角的購物車圖標會在右側出現這樣一個側邊，提示你講選中的圖標加入到自定義的項目中。將購物車已有的圖標添加到剛纔新建的項目中。

此時項目中就有了剛纔添加的圖標字體了。

接下來，又有個重點來了！編輯每一個圖標，爲每一個圖標設置名稱、編碼。編碼切不可和 UI 框架引入的圖標字體同樣，不然會出現使用不了的狀況。請你們謹慎操做！！！

首先確認UI框架引入圖標字體的編碼範圍。根據 antd 官網 查看，其引入圖標大體的編碼範圍在 E6 到 E9。點擊畫筆編輯每一個圖標的屬性。

在圖標的編輯頁面，爲圖標填寫一個 避免和 UI 框架中圖標字體重複的 unicode 和 Font Class / Symbol，而後保存就 OK 了。

接下來將編輯好的圖標項目下載到本地，畢竟咱們是要造本地的項目中進行引入。

解壓下載獲得的壓縮包，獲得以下的目錄文件。其中畫紅框的使咱們須要的文件，其餘的隨便丟棄吧！！

選擇一個適合是的靜態資源文件目錄而後新建一個 IconFont 的文件夾，再將上面的文件 copy 到改文件夾下。

再編寫一個全局的圖標字體樣式的引入。能夠在全局的樣式引入該文件，或者在單個的樣式文件裏面引入！

引入後，就和 UI 框架引入圖標同樣了！

到這裏總結就結束了！！！哈哈哈。。