使用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',
    //...
});