在使用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"> </div> </form>