字体真棒图标未在 Phonegap iOS 应用程序中呈现

Posted 2023-03-14

【中文标题】字体真棒图标未在 Phonegap iOS 应用程序中呈现

【英文标题】：Font Awesome icons not rendering in Phonegap iOS application

【发布时间】：2014-08-01 00:30:09

【问题描述】：

然后渲染我得到小方块的图标：

它在浏览器中运行良好，但是当我在 ios Simulator 或 Mobile Safari 中查看我的应用时，方块就在那里。

非常感谢您的帮助！

【问题讨论】：

查看answer

@BuDen 我尝试将所有对 optimizeLegibility 的引用更改为 auto 但没有任何成功

字体文件在 phonegap 应用程序内部或外部（网络服务器）中的位置？

@frank 它们与 css 文件位于同一文件夹中，位于名为 fonts 的子文件夹中。

@Karl 几天前一个人遇到了类似的问题。(link here)。您能否向我们展示您在 index.html 文件中添加了包含 CSS 文件的链接标记的行。？另外，您的 phonegap 应用程序中包含哪些字体很棒的文件？

【参考方案1】：

我有同样的问题。我将“font-awesome.min.css”文件直接放在我的cordova ios xcode中，然后在“index.html”文件中调用它：

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

之后，我尝试使用字体真棒微调器而不是默认的 jQuery Modile 预加载器，甚至在 jQuery Mobile 调用之前在“index.html”中使用此代码：

<script>
        $(document).bind( 'mobileinit', function()
                         $.mobile.loader.prototype.options.text = "loading";
                         $.mobile.loader.prototype.options.textVisible = true;
                         $.mobile.loader.prototype.options.theme = "p";
                         $.mobile.loader.prototype.options.textonly = false;
                         $.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><i class='fa fa-spinner fa-spin fa-5x' style='color:#000;'></i></span>";
                         );
</script>

结果和旋转正方形一样，我哪里错了？

【讨论】：

通过将 Font Awesome 目录中的 "fonts" 文件夹添加到项目目录 "www" 来修复。希望对您有所帮助

【参考方案2】：

首先，安装 Font Awesome：

下载最新的Font Awesome版本 双击 fontawesome-webfont.ttf 并将其安装在您的笔记本电脑/台式机上（可选） 将 fontawesome.css 复制到 www/css 删除 fontawesome.css 中对字体文件的引用，即删除 @font-face 声明 然后在 Xcode 中：

将 fontawesome-webfont.ttf 复制到“你的项目/资源/fonts/fontawesome-webfont.ttf” 通过选择“信息”选项卡将 Font Awesome 添加到 .plist 文件 添加一个名为“应用程序提供的字体”的新属性并将值设置为“fontawesome-webfont.ttf” 清理并构建您的项目。 Font Awesome 现在可以使用了。

Phonegap 示例： class="发发齿轮"