關于阿里媽媽圖標制作（轉的，留作參考） - luomir－IT工程師數位筆記本

文章出處

網站使用icon字體圖標的好處之前也說過，這里就不再贅述了。

今天無意中發現的iconfont這個網站，很有點相見恨晚的感覺，因為就在昨天我還在為icon字體的事兒發愁：網站本來是使用了icon字體圖標的，是主題作者清楓自制的幾個文件，效果本來挺好的，但有一個bug是我發現在chrome下面很多圖標都無法顯示，不管我將字體文件怎樣重新編輯和生成都不能解決。

在認識到以我現有的水平是搞不定這個問題的之后，只好很不情愿的將字體文件全部替換成Font Awesome字體了。確實是很不情愿，因為Font Awesome僅字體文件就有好幾百KB（svg文件達到194KB），這無疑會增加網站訪問的壓力，雖然我現在用著七牛每個月10G的免費流量，但也不想給網站增加額外的幾百KB請求的負擔不是。還好今天發現了iconfont，下面就來說說為什么我要將剛修改好的Font Awesome字體拋棄而轉用iconfont。

隨便說說兩者的優缺點

其實主要是說iconfont的優點和Font Awesome的缺點。-_-|||
iconfont的圖標庫相當巨大，我在寫上一篇文章的時候還是51794個，現在刷新之后圖標數量已經是52090個了。如果這么大的一個庫里面仍然沒有你需要的圖標的話，你也可以自己動手制作你自己的圖標然后使用網站的在線生成工具來生成字體文件，分分鐘就可以使用了。

除了擁有巨大的圖標庫之外，iconfont最值得推薦的原因還在于她使用上的靈活性（實話說，iconfont給我最初的印象是有點像現在各大運營商主打的可自由搭配的積木套餐），因為她完全可以由你自由搭配組合、按需索取。在自定義Walker類給WORDPRESS導航菜單添加ICON字體圖標這篇文章中我就提到過。如果你的網站一共只需要用到5個圖標，那么你只需要將這5個圖標的字體文件和相關的css下載下來就可以用了。如果你想使用iconfont的CDN服務的話，你都不用下載，直接將這幾個圖標添加到你自己的項目中，然后在你的網站里面引用一個CSS文件就可以了。

再反觀Font Awesome，哪怕你只是要用到2個圖標，你都必須要把所有文件都下載下來才能使用。而上面也說了，僅SVG就194KB大了，還有其他幾個字體文件加起來一共有400+KB，這還是沒有算上同樣好幾十KB的CSS文件。

孰優孰劣是不是很清楚？相信你已經有了自己的選擇。

來，下面說說如何使用，其實很簡單，但還是理一個步驟給不是很懂的同學。

第一步：將你看上的圖標加入到購物車

官方叫法是“暫存架”，購物車只是我的叫法，好像并不準確，因為不需要花錢的啊，但是它用了一個購物車的圖標，所以暫且這樣稱呼吧。
這里你可以在iconfont的圖標庫里面尋找你要的圖標，但是我不建議你這樣做，因為默認給出的幾個官方圖標庫里面的圖標是不全的。正確的做法是在導航欄右側的輸入框中輸入關鍵詞來搜索圖標，這樣就會將網友制作的圖標都搜出來。（我一開始就是在圖標庫中找微信、twitter和QQ空間的圖標怎么也找不到，后來試著在上面搜索了一下，出來大把的，才知道官方庫里面是沒有收錄這些圖標的。。。）

第二步：存儲為項目或者下載到本地

就像上面圖片中的那樣，添加到購物車之后就可以存為項目或下載到本地，這里看你的需求了。反正我是想使用阿里的CDN，所以直接存為項目了。存儲為項目的時候你可以選擇存為新項目還是添加到已有的項目里面，確定之后會跳轉到項目詳情頁。

第三步：下載修改并調用CSS文件

在項目詳情頁里面你還是可以選擇是下載文件到本地使用還是使用阿里的CDN，當然選擇CDN了（也就是頁面中的獲取在線鏈接）。這里建議使用Font Class，因為如果你選擇Unicode的話CSS中圖標的編碼都要自己寫，這個有點麻煩啊，不符合我這種懶鬼的風格，所以如果你也是懶鬼一枚請將下圖中右上角的滑塊滑到右側。

然后鼠標移到左側的獲取在線鏈接這里就能看到生成的CSS文件了，你現在有兩個選擇：一是直接調用這個文件，在網站的HTML中修改添加圖標的元素的類為"iconfont icon-xxx"的；第二個選擇是將這個文件下載下來，然后做一些修改之后傳到服務器本地調用，然后在網站的HTML中修改添加圖標的元素的類為"icon-xxx"。我選擇的是第二種，大家隨意。
選擇第二種的話需要對CSS做一點小的修改，將選擇器“.iconfont”改為“[class*=icon-],[class^=icon-]”：

[class*="icon-"],[class^="icon-"]{
font-family:"iconfont"!important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing:
antialiased;
-webkit-text-stroke-width:0.2px;
-moz-osx-font-smoothing:grayscale;}