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'"  这样的写法就能够加载该图标了。效果如图