使用Font Awesome替换EasyUI的图标
用过EasyUI的朋友都知道，大部分组件都有一个iconCls属性，用于显示一个图标。但是EasyUI自带图标数量少、不美观，于是想到了使用Font Awesome来更换和拓展这些图标。
先看看EasyUI的图标用法，下面定义了一个LinkButton。
<a class="easyui-linkbutton" data-options="iconCls:\'icon-add\',plain:true">添加</a>
其中 iconCls 为 icon-add，实质是指定了一个名为 icon-add 的CSS类，这些CSS都位于themes目录下的icon.css文件中，都很简单，就是将图标作为背景显示，比如icon-add定义如下，显示了一个“加号”图标：
.icon-add{ background:url(\'icons/edit_add.png\') no-repeat center center; }
用FireBug之类的浏览器调试工具，查看最终生成的图标部分的DOM如下，包含了两个CSS类，l-btn-icon 和 icon-add，其中icon-add就是上面定义的 iconCls，而l-btn-icon，我把它们称为图标基类，每个组件有各自的图标基类，比如：LinkButton的图标基类是l-btn-icon，Panel的是panel-icon，Menu的是menu-icon，Tabs的是tabs-icon。
<span class="l-btn-icon icon-add"> </span>
Font Awesome是一套图标字体库，官方网址：http://fontawesome.io/，下载后，在页面引入css/font-awesome.min.css即可，最简单的一个示例如下，即可显示一个“加号”图标
<span class="fa fa-plus"></span>
上例中也包含了两个CSS类，fa 和 fa-plus，同样，可以把 fa 看着基类，定义了一些基本样式，特别重要的是把字体定义为FontAwesome，源码如下：
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
fa-plus的源码如下，利用before伪类在标签中插入Unicode，而这些Unicode，在应用了 FontAwesome字体后，就会显示为相应的图标。
.fa-plus:before { content: "\f067"; }
为了在EasyUI中使用FontAwesome字体图标，我们就要参照fa来重写上面提到的EasyUI各组件的图标基类，一般网页都要引用自己的CSS文件，把下面这些代码写在你自己的CSS文件里就可以了，我已经将必要的地方加了!important，所以这个CSS文件和easyui.css的先后顺序就无所谓了。还有些组件没有包含在下面，你可以如法炮制。
.l-btn-icon,.panel-icon,.menu-icon,.tabs-icon { font-family:FontAwesome; font-size:14px !important; line-height:normal !important; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#6699cc;
text-align:center; } .tabs-icon { font-size:16px !important; font-weight:normal; }
EasyUI的iconCls属性，设置为FontAwesome的相应类即可，比如：
<a class="easyui-linkbutton" data-options="iconCls:\'fa-plus\',plain:true">添加</a>
最后看几个示例：
<a id="add" class="easyui-linkbutton" data-options="iconCls:\'fa-plus\',plain:true">添加</a> <a id="batchDelete" class="easyui-linkbutton" data-options="iconCls:\'fa-trash\',plain:true">批量删除</a> <a id="batchEdit" class="easyui-menubutton" data-options="menu:\'#batchEditMenu\',iconCls:\'fa-th\',plain:true">批量操作</a> <a id="superSearch" class="easyui-linkbutton" data-options="iconCls:\'fa-search\',plain:true">组合查询</a> <a id="filter" class="easyui-menubutton" data-options="menu:\'#filterMenu\',iconCls:\'fa-filter\',plain:true">筛选</a> <a id="sort" class="easyui-menubutton" data-options="menu:\'#sortMenu\',iconCls:\'fa-sort\',plain:true">排序</a> <a id="refresh" class="easyui-linkbutton" data-options="iconCls:\'fa-refresh\',plain:true">刷新</a> <a id="help" class="easyui-linkbutton" data-options="iconCls:\'fa-question-circle-o\',plain:true">帮助</a>
$(\'#editDialog\').dialog({ //... iconCls:\'fa-pencil\', //... });