JQuery EasyUI で標準以外のアイコンを使う

JQuery EasyUI で独自のアイコンを使う方法。

標準のアイコンを使う場合は、HTMLで

<data-options="iconCls:'icon-save'">

のように｢アイコンの名前(クラス名)」を指定するが、アイコンを自前で用意したい場合は、以下の手順で実現可。

1. アイコンファイルを配置する
   アイコンの場所： (Jquery EasyUIライブラリのルート)\themes\icons\
2. CSSファイルを修正する
   CSSファイルの場所：  (Jquery EasyUIライブラリのルート)\themes\icon.css
   このファイルに、アイコンクラス名を追記する。以下は記述例。

   .icon-myfileupload{
   background:url('icons/myupload.png') no-repeat center center;
   }
   

上記で定義したアイコンをボタン(easyui-linkbutton)に設定する場合は、以下のようにする。

<a id="btnUp" class="easyui-linkbutton" data-options="iconCls:'icon-myfileupload'>Up</a>