easyUI如何增加自定义的图标

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

使用easyUI开发后台，默认已经存在一些图标，如增、删、改、查的图标，以及一些常用的工具图标，但远远满足不了一个稍微大一点的系统，如左侧的导航列表，可以每一个菜单对应一个图标，更加美观和形象化，那么easyUI如何来扩展呢。

1、到网上下载自己需要的16*16的png图标，把图片名称改为自己需要的，然后把图 片复制到easyUI的 hemesicons目录下，即小图标icons目录，这个目录是专门存放easyUI中工具栏，状态栏，链接等用到的小图标，而每一个图标在css中都 是唯一的，下面修改css，定义新添加的图标。

2、找到easyUI目录下的themes目录，在其根目录有一个名为icon.css的文件，这个文件用于定义小图标的，定义如下：

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

其中：icon-sound中的sound必须对应图片名称。

3、在html中引用，图标。

<div title="用户管理" data-options="selected:true,iconCls:'icon-user'" class="list">
    <ul>
    <li><a href="javascript:;" onclick="openTab('list')">用户列表</a></li>
    </ul>
</div>

其中iconCls:'icon-user'中的icon-sound就是css中的class名称。

转载于:https://my.oschina.net/ajian2014/blog/317830