利用Twitter图标字体库Font Awesome自定义Kendo UI Mobile图标-控件新闻-慧都网

利用Twitter图标字体库Font Awesome自定义Kendo UI Mobile图标

原创|使用教程|编辑：郝浩|2013-09-24 09:16:29.000|阅读 2490 次

概述：本文将告诉你如何利用Twitter的图标字体库Font Awesome自定义Kendo UI Mobile项目中的图标

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>