Jquery EeasyUI等框架中图标的处理方法

在使用Query EasyUI、Ext等框架开发项目的时候，经常会用到很多小的图标，常见几个图片应用方式总结如下：

一、在jQuery Easyui中添加小图标

1、添加图标的两小步：

先到themes目录下的icon.css中，添加新图标对应的CSS类选择器，参照已有的图标类，只要指定图标对应的路径即可，如下所示：

.icon-forward{

background:url('icons/forward.png') no-repeat;

}

然后将图标文件放置到icons目录下即可。

2、应用新图标不生效的问题

已经按上述的步骤处理了，但是用到窗口上时，一直都没效果。后来查看网页的源码得知，引入的jquery-easyui-1.2.6/themes/icon.css文件中没有加载新的样式类，当前使用的是firefox浏览器，估计可能是缓存的原因，所以清了一下缓存后重新刷了一下就有效果了。

二、CSS从大图片上截取小图标的操作

注：图片名称（tabicons.png）每个小图标width:18px;height:18px从左上角坐标为（-0px;-0px;）;

例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为(-20px;-0px;)中间依次加20个像素

截取小图标样式

.icon

{

    background: url(imges/tabicons.png) no-repeat;

    width: 18px;

    line-height: 18px;

    display: inline-block;

}

.icon-set

{

 background-position: -380px -200px;

}

.icon-add

{

 background-position: -20px 0px;

}

 样式调用示例

<form id="form1" runat="server">

    <div class="icon icon-sys">

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

    </form>