原創(chuàng)|使用教程|編輯:郝浩|2013-09-24 09:16:29.000|閱讀 2541 次
概述:本文將告訴你如何利用Twitter的圖標(biāo)字體庫Font Awesome自定義Kendo UI Mobile項目中的圖標(biāo)
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
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的類設(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è)置就可以了,非常簡單和方便!
不過,上面的方法對于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)吧!
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都控件