首先我们需要下载好自己需要的标签并且放在一个文件中,然后把这个文件夹复制到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是否有效
成功显示 代表配置成功！
