如何/在哪里安装字体Awesome在jquery移动应用程序 [英] How/where to install font Awesome in jquery mobile app

问题描述

尝试，因为我可能不能得到Font Awesome工作。
我已将Font Awesome包上传到我的根目录并链接到它。

 < link rel = stylesheettype =text / csshref =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 '），
 url（'font / fontawesome-webfont.ttf'）format（'truetype'）; 
 font-weight：normal; 
 font-style：normal; 
} 
  

字体驻留在子目录中root / font-awesome / font / / p>

我的链接标记示例：

 < a href =＃ infodata-rel =popupdata-mini =truedata-iconpos =notextdata-transition =slideupdata-role =button>< i class =icon-cog> ;< / i>< / a> 
  

我放置的图标标签似乎没有问题 - 我得到一个空白的圆圈。

任何建议都会明显。这发生在火狐浏览器在我的mac和safari在iOS 6.0 - iPhone

解决方案

我测试了这两个字体Awesome 4和早期版本。我的答案是基于版本4.

所以你需要做的是从Font Awesome样式表复制图标类，并将它们添加到您自己的样式表。然后只需在类名称前添加 ui-icon - 即可。

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

font-family类是 .fa ，这将变成 .ui-icon-fa

  .ui-icon-fa {} 
  

实际图示css .fa-cog 会变成 .ui-icon-fa-cog

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

希望这有意义。

Try as I might I can't get Font Awesome working at all. I've uploaded the Font Awesome pack to my root directory and linked to it.

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

The css includes the font declaration

@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;
}

The fonts reside in the child directory root/font-awesome/font/

My link markup example:

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

Doesn't seem to matter what icon tag I place - I get a blank circle.

Any suggestions would be appreciable. This happens in Firefox safari on my mac and safari on iOS 6.0 - iPhone

解决方案

I've tested this on both Font Awesome 4 and earlier versions. My answer below is based on version 4.

So what you need to do is copy your icon classes from the Font Awesome style sheet and add them to your own style sheet. Then just add ui-icon- in front of the class name. You must also do this to the class where the font-family is created.

For example if you have data-icon="fa fa-cog"

The font-family class is .fa and this will become .ui-icon-fa

.ui-icon-fa {}

And the actual icon css .fa-cog will become .ui-icon-fa-cog

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

Hope this makes sense.

这篇关于如何/在哪里安装字体Awesome在jquery移动应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！