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