Font Awesome是專門為 Twitter Boostrap 設計的圖標字體庫，目前包含有361個圖標，且可以免費用于商業項目。最關鍵的是，筆者發現它可以與HTML5 JS框架 Kendo UI Mobile 很好的集成！下面筆者跟大家分享一下如何添加圖標到Kendo UI Mobile項目中。

直接引用Font Awesome圖標

只要將Font Awesome的類設置到位，用一個<i>標簽就可以隨處使用它的圖標。比如，如果我想在我的Kendo UI Mobile中使用Twitter圖標，只需要輸入以下標簽：

<a><i class="icon-twitter"></a>

如果想把圖標尺寸調大，只需要輸入標題標簽：

<h1><i class="icon-twitter"></i></h1>

如果還不夠大，你可以直接輸入font size。如果想要其他顏色，只需要用CSS進行樣式設置就可以了，非常簡單和方便！

將Font Awesome圖標應用于Kendo UI Mobile組件

不過，上面的方法對于Kendo UI Mobile的組件卻不奏效，Kendo UI Mobile為組件附加了一個偽元素，如用于顯示圖標的選項卡按鈕。但沒有關系，我們可以用一點點CSS將 Kendo UI Mobile 擴展，讓它支持任何你想要的Font Awesome圖標。

首先，讓Kendo UI Mobile查找到任何.km-icon類時就使用Font Awesome，當指定了data-icon時，Kendo UI Mobile將自動獲取這個類。這段CSS要放在自定義的樣式表中，并且要在Kendo UI Mobile樣式聲明之后：

.fa .km-icon:after,
.fa .km-icon:before
{
font: 1em/1em 'FontAwesome';
}

接下來我們要找到圖標的Unicode值，這個到中查詢。比如搜索twitter，你會找到兩個關于twitter的圖標。icon-twitter圖標的Unicode值是F099，它前面還有一段字符，但那是針對HTML編碼的，CSS只需要后面這幾位就可以了。

下面我們就可以創建一個自定義的圖標類了：

.km-twitter:after,
.km-twitter:before {
content: "\F099";
}

那么怎么使用呢？很簡單，只需要添加一個fa類到我們的Tabstrip按鈕中，代碼如下：

<div data-role="tabstrip">
<a href="#home" class="fa" data-icon="twitter">Home</a>
<a href="#home" data-icon="info">Info</a>
<a href="#home" data-icon="settings">Settings</a>
<a href="#home" data-icon="favorites">Favorites</a>
</div>

Font Awesome的圖標非常全面，我經常能在里面找到之前沒有看見過的圖標。怎么樣？趕快下載Kendo UI Mobile和，你也來創建自己的自定義圖標吧！

慧都特邀Kendo UI原廠開發工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>