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>