FontAwesome 使用cordova/phonegap 在WP8 上显示为正方形 [英] FontAwesome displaying as squares on WP8 using cordova/phonegap

问题描述

我使用的是 AngularMobileUI 框架，图标仅显示为正方形.我之前尝试过 Ionic 框架，结果也是一样.

I am using the AngularMobileUI framework and the icons just display as squares. I have previously tried the Ionic framework and that did the same.

有谁知道如何解决这个问题，以及它为什么会发生?

Anyone know how to fix this, and also why it happens?

我的图标在 android 和 ios 上显示正常

My icons display fine on android and ios

推荐答案

如果有人遇到这个问题，我在这里找到了部分答案

Encase someone has this problem, i found part of the answer here

获取一种适用于 HTML5 Windows Phone 应用的网络字体?

FontAwesome 将可嵌入标志设置为 4.首先您需要将该值设置为零.完成后，您需要更改css并在加载字体文件时删除查询字符串.

FontAwesome has the embeddable flag set to 4. First you need to set the value to zero. Once that is done, you need to change the css and remove the querystring when loading the font file.

@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-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') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

我刚刚从 ttf 文件中删除了查询字符串，因为在 android 和 ios 上，这似乎无关紧要.

I just removed the querystring from the ttf file, since on android and ios, this seems to not matter.

希望这对某人有帮助

这篇关于FontAwesome 使用cordova/phonegap 在WP8 上显示为正方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！