easyUI添加自定义图标

2019独角兽企业重金招聘Python工程师标准>>>

    相信很多的程序员都或多或少的用过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'"  这样的写法就可以加载该图标了。效果如图

转载于:https://my.oschina.net/u/3460260/blog/889996