目前回到pc端開發，開始用了easyui這個框架。重拾easyui后感覺這個框架用的很多技術太古老，頁面風格也太控件化。單從圖標一項來說吧，這種花花綠綠的圖標用戶一看都傻了眼，同時整個框架就提供了那么幾種圖標，很多按鈕和菜單需要自己做圖標。
有沒有方便快捷擴充圖標的方法呢？其實非常簡單，可以使用webfont圖標。webfont是一種將矢量字體文件擴充到瀏覽器上的技術，他出現的初衷是擴展客戶端的字體，避免因為客戶端因為設備上的字體缺失，而造成顯示異常的情況。從服務器上下載字體並顯示，如果僅僅是英文26個字母的話，這個思路還是可行的，但是實際應用過程中因為Unicode碼是在太大了，例如漢字，上萬個文字都需要從服務器上下載字體很顯然是不現實的，所以實際應用中webfont更多的是用在圖標方面。webfont圖標在如今的pc端和移動端都在大量使用，我們熟悉的bootstarp3所用的圖標就是這種webfont式的圖標。
既然想到了技術方案，那么如何快速擴充easyui的圖標呢？這個很簡單，因為現在的webfont制作技術已經非常成熟，很多在線工具就直接提供webfont的制作，這里介紹兩個工具資源：
1.http://www.iconfont.cn/ 掛着阿里名頭的圖標制作網站，里面有很詳細的webfont制作教程，更重要的是他還提供了大量的阿里及第三方圖標庫，可以快速地導出這些現成的圖標。
2.http://fontello.com/ 一家外國網站，整合了很多知名的webfont圖標庫，同時還支持導入上傳現成的圖標庫和矢量圖，比阿里好的地方是他支持自己定義圖標的名字及排列順序。
使用這些圖標資源就可以快速地擴充我們自己項目的圖標庫，同時還不需要專門的美工，真可謂經濟實惠^_^。
那么問題來了，如何與easyui整合？其實很簡單，webfont的使用方式有兩種：
1.使用字體的方式，因為webfont的本質就是字體，所以將每一個圖標對應的字符放進我們要顯示圖標的位置上，並在style里設置好字符的字體，這樣這個字符就被渲染為圖標了。
2.使用class，其實和上邊的差不多，只是定義好一組class，在class里面將webfont的對應字體設置到content屬性里，再設置字體，這樣就省去了自己維護字符的過程。
具體改造過程：
1.從http://fontello.com/的圖標庫里面挑選需要的圖標，然后修改各個圖標的名字，這里我就挑選了easyui圖標庫涵蓋的圖標，並將他們的名字按照easyui圖標庫對應的名字命名。
2.解壓后會的目錄結構如下：
css和font就是我們圖標所保存的文件，因為webfont其實是矢量圖，font就是各個瀏覽器下的矢量圖文件，而css是我們調用的庫。demo.html是工具網站給我的查看工具，可以瀏覽demo.html迅速確定我們的class名稱。
3.使用的時候不要引入easyui的icon.css文件，而引入我們css目錄下的fontello.css，如果需要動畫還可以引入animation.css文件。
優點：
其實就是webfont的優點
1.矢量圖，資源小，並支持無限制的縮放（支持縮放在easyui里不是很明顯）。
2.支持動態改變顏色，方便做高亮顯示圖標（這個以往用圖片做的話非常麻煩，往往要做兩套圖）。
3.存在現成的圖標庫，基本能夠滿足需求，無需再找美工制作。
4.扁平化圖標更好看。
缺點：
1.各個圖標庫的圖標大小略有不同，會導致圖標並排顯示的時候給人不整齊的感覺。
2.webfont這項技術瀏覽器兼容性差（其實只要不是古董瀏覽器都支持，可是easyui就是個古董）。