easyUI自定义icon

首先我们需要下载好自己需要的标签并且放在一个文件中,然后把这个文件夹复制到easyui所在目录下的themes目录下
如图

usericons:存放自定义icon文件夹
icons.css:配置自定义icon的css文件

/*配置icon的css*/.icon-home{    background:url('usericons/home.png') no-repeat center center;}.icon-item{    background:url('usericons/item.png') no-repeat center center;}.icon-writeblog{    background:url('usericons/writeblog.png') no-repeat center center;}.icon-bkgl{    background:url('usericons/bkgl.png') no-repeat center center;}.icon-bklb{    background:url('usericons/bklb.png') no-repeat center center;}.icon-plgl{    background:url('usericons/plgl.png') no-repeat center center;}.icon-grxx{    background:url('usericons/grxx.png') no-repeat center center;}.icon-grxxxg{    background:url('usericons/grxxxg.png') no-repeat center center;}.icon-system{    background:url('usericons/system.png') no-repeat center center;}.icon-modifyPassword{    background:url('usericons/modifyPassword.png') no-repeat center center;}.icon-refresh{    background:url('usericons/refresh.png') no-repeat center center;}.icon-download{    background:url('usericons/download.png') no-repeat center center;}.icon-exit{    background:url('usericons/exit.png') no-repeat center center;}.icon-submit{    background:url('usericons/submit.png') no-repeat center center;}.icon-review{    background:url('usericons/review.png') no-repeat center center;}.icon-link{    background:url('usericons/link.png') no-repeat center center;}

接下来我们可以iconCls中使用这些自定义的icon的css类了

 <div title="常用操作" data-options="selected:true,iconCls:'icon-item'" style="padding: 10px">            <a href="javascript:openTab('写博客','writeBlog.jsp','icon-writeblog')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px">写博客</a>            <a href="javascript:openTab('评论审核','commentReview.jsp','icon-review')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-review'" style="width: 150px">评论审核</a>        </div>        <div title="博客管理" data-options="iconCls:'icon-bkgl'" style="padding:10px;">            <a href="javascript:openTab('写博客','writeBlog.jsp','icon-writeblog')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px;">写博客</a>            <a href="javascript:openTab('博客信息管理','blogManage.jsp','icon-bkgl')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-bkgl'" style="width: 150px;">博客信息管理</a>        </div>        <div title="博客类别管理" data-options="iconCls:'icon-bklb'" style="padding:10px">            <a href="javascript:openTab('博客类别信息管理','blogTypeManage.jsp','icon-bklb')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-bklb'" style="width: 150px;">博客类别信息管理</a>        </div>        <div title="评论管理" data-options="iconCls:'icon-plgl'" style="padding:10px">            <a href="javascript:openTab('评论审核','commentReview.jsp','icon-review')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-review'" style="width: 150px">评论审核</a>            <a href="javascript:openTab('评论信息管理','commentManage.jsp','icon-plgl')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-plgl'" style="width: 150px;">评论信息管理</a>        </div>        <div title="个人信息管理" data-options="iconCls:'icon-grxx'" style="padding:10px">            <a href="javascript:openTab('修改个人信息','modifyInfo.jsp','icon-grxxxg')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-grxxxg'" style="width: 150px;">修改个人信息</a>        </div>        <div title="系统管理" data-options="iconCls:'icon-system'" style="padding:10px">            <a href="javascript:openTab('友情链接管理','linkManage.jsp','icon-link')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-link'" style="width: 150px">友情链接管理</a>            <a href="javascript:openPasswordModifyDialog()" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-modifyPassword'" style="width: 150px;">修改密码</a>            <a href="javascript:refreshSystemCache()" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-refresh'" style="width: 150px;">刷新系统缓存</a>            <a href="javascript:logout()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-exit'"               style="width: 150px;">安全退出</a>        </div>

运行一下验证自定义icon是否有效

成功显示 代表配置成功！