jquery - 如何/在 jquery 移动应用程序中安装 Awesome 字体

Question

尽我所能，我根本无法让 Font Awesome 工作。我已将 Font Awesome 包上传到我的根目录并链接到它。

<link rel="stylesheet" type="text/css" href="font-awesome/jqm-icon-pack-fa.css">

css 包含字体声明

@font-face {
font-family: 'FontAwesome';
src: url('font/fontawesome-webfont.eot');
src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
     url('font/fontawesome-webfont.woff') format('woff'),
     url('font/fontawesome-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

字体位于子目录 root/font-awesome/font/

我的链接标记示例:

<a href="#info"  data-rel="popup" data-mini="true"data-iconpos="notext" data-transition="slideup"data-role="button" ><i class="icon-cog"></i></a>

我放置什么图标标签似乎并不重要 - 我得到一个空白圆圈。

任何建议都将不胜感激。这发生在我的 mac 上的 Firefox safari 和 iOS 6.0 上的 safari - iPhone

Answer 1

我已经在 Font Awesome 4 和更早版本上对此进行了测试。我下面的回答基于版本 4。

所以您需要做的是从 Font Awesome 样式表中复制您的图标类，并将它们添加到您自己的样式表中。然后在类名前加上ui-icon-即可。您还必须对创建字体系列的类执行此操作。

例如，如果您有 data-icon="fa fa-cog"

字体系列类是.fa，这将变成.ui-icon-fa

.ui-icon-fa {}

而实际的图标 css .fa-cog 会变成 .ui-icon-fa-cog

.ui-icon-fa-cog:before {
 content: "\f013";
}

希望这是有道理的。