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

直接引用Font Awesome圖標(biāo)

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

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

如果想把圖標(biāo)尺寸調(diào)大，只需要輸入標(biāo)題標(biāo)簽：

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

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

將Font Awesome圖標(biāo)應(yīng)用于Kendo UI Mobile組件

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

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

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

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

下面我們就可以創(chuàng)建一個自定義的圖標(biāo)類了：

.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的圖標(biāo)非常全面，我經(jīng)常能在里面找到之前沒有看見過的圖標(biāo)。怎么樣？趕快下載Kendo UI Mobile和，你也來創(chuàng)建自己的自定義圖標(biāo)吧！

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