easyUI添加自定義圖標

    相信不少的程序員都或多或少的用過easyUI 這一前端框架，它給予了開發者很便捷的界面開發。而在界面開發中，圖標的使用自不在少，在easyUI 這一框架中，咱們能夠經過 這樣的書寫方式來爲某個元素添加圖標。

    然而，easyUI 所提供的圖標庫有必定的限制，筆者在試圖使用 「主頁」 這樣的圖標時，發現它並不提供該圖標。後來筆者經過查看 easyUI 的源碼的方式，解決了該問題。那麼須要怎樣添加自定義的圖標呢？方法以下：

    首先是圖標的獲取，筆者推薦上 「阿里巴巴矢量圖標庫」 來進行圖標的獲取。獲取到圖標以後，好比這樣一個 「主頁」 圖標，將它重命名，比如命名爲 「home.png」。

    而後打開 easyUI 封裝的文件包，找到 「themes」 這樣一個文件夾，將 「home.png」 文件放入 「themes」 目錄下的 「icons」 文件夾中。

    解決圖標文件問題後，還須要增長代碼。在 「themes」 目錄下有一個 「icon.css」 文件，打開該文件，咱們發現它的書寫方式形如：

.icon-blank{
    background:url('icons/blank.gif') no-repeat center center;
}

咱們能夠這樣增長代碼來獲取 「home.png」 圖標文件：

    .icon-home{
    background:url('icons/home.png') no-repeat center center;
}

至此問題解決，在頁面引用中，咱們經過  data-options="iconCls:'icon-home'"  這樣的寫法就能夠加載該圖標了。效果如圖