Font Awesome 4.1.0 在 Cordova android 模拟器中不起作用答案

【问题标题】：Font Awesome 4.1.0 not working in Cordova android emulatorFont Awesome 4.1.0 在 Cordova android 模拟器中不起作用
【发布时间】：2014-09-21 06:06:52
【问题描述】：

我不明白为什么我的 cordova 应用程序中没有显示 Font Awesome 图标。

我下载了整个 font-awesome 文件夹并将其复制到我的项目文件夹中。我已将文件夹包含在：

<link rel="stylesheet" href="../font-awesome-4.1.0/css/font-awesome.min.css">

我确信这是正确的，因为 <i class="fa fa-bars fa-2x"></i> 将在 chrome 中完美显示。

但是，当我运行 cordova emulate android 时，图标不会出现在我的 android 模拟器中。

然后我尝试在此处进行故障排除：https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

似乎故障排除认为这是与text-rendering相关的错误，但是当我在缩小和完整css中将text-rendering: auto;添加到.fa { }时，我仍然看不到我的android中的图标模拟器。

我不知道该怎么办。我的 android 目标项目是 4.4.2 api level 19。有人可以帮忙吗？

这是与图标相关的 html 部分。

<body> 
    <div id="main">
           <div id="top">
               <i id="settings" class="fa fa-bars fa-2x"></i>
               <p id="logo" > Chowza Inc </p>
          </div>
    </div>
...
</body>

【问题讨论】：

你能从font-awesome.min.css文件中获取一个示例字体，将它放在你的html文件的
@frank hmmm 当我尝试font-family: 'FontAwesome'; 时，似乎什么都没有改变……你知道发生了什么吗？

标签： android css cordova fonts font-awesome

【解决方案1】：

我在 android 4.0.3 cordova 应用程序上遇到了同样的问题。就我而言，我必须从 url 中删除版本参数 (v=4.1.0)。例如：

font-awesome.css 中的旧块

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

font-awesome.css 中的新块

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

【讨论】：

【解决方案2】：

回答我自己的问题...

我将 FontAwesome 文件夹复制到我的项目文件夹中，但是当使用 cordova emulate android 时，Font Awesome 文件夹没有被构建。将 FontAwesome 文件夹复制到 CSS 文件夹中并更改相关链接路径更正了此问题。

【讨论】：