iconfont的使用

首先你要有一個圖標庫的帳號，咱們使用的是阿里矢量圖標庫，其次你要有一套已經設計好的圖標原圖。若是你具有了這些，就能夠和我一塊兒看iconfont的使用姿式了。

寫在前面

1. 不結合其餘矢量庫或UI框架一塊兒使用的方法，能夠參照官網的指示進行操做：http://iconfont.cn/plus/help/detail?helptype=code 也能夠在稍後下載到本地的官方demo中學習如何使用。
2. 若是結合其餘矢量庫一塊兒使用則有一些須要注意的問題和一些操做。咱們的項目是用的ant design，所以本文記錄和ant design結合使用

使用方法：

1. 登陸帳號並找到個人項目

若是還沒有本身的項目，點擊添加項目

如何上傳圖標請參照官網進行操做，能夠由設計師直接上傳也能夠由程序員上傳。
http://iconfont.cn/plus/help/detail?helptype=about

要點說明：

新建項目時FontClass/Symbol前綴和Font Family字段的填寫很重要，後面會講解用途

2.將圖標下載到本地

你會獲得以下文件：

其中demo.css，demo_fontclass,demo_symbol,demo_unicode詳細演示了三種的使用方法。

要點說明：

若是和ant design結合使用，這個前綴必定要寫爲anticon，由於在使用其圖標寫法時會自動給圖標加上anticon前綴。以下圖官網描述：

3. 整合進項目中

首先將下載的圖標文件放進項目相應靜態文件夾中。
咱們使用的是fontclass方式，所以，須要在整個項目的css中引入iconfont.css
而後想要拓展ant design的圖標庫就須要看一下它是如何使用的。最終我找到了兩個關鍵的文件：/node_modules/antd/lib/style/core/iconfont.less,/node_modules/antd/lib/style／mixins/iconfont.less,當看到第一個文件和我們下載下來的iconfont.css文件如此類似，真是放心了一大半。
最後在另外一個能覆蓋掉自帶樣式的文件中添加以下代碼

這樣能夠告訴系統先用anticon_user（還記得這個是新建項目時定義的字體名稱吧）字體，沒有的話再用anticon（ant design定義的）字體

注意：ant design的圖標都是\e600多，以下圖，所以你本身的圖標的Unicode(16進制)定義的時候必定不要和原始的重複，不然會產生沒必要要的麻煩。