FontAwesome displaying as squares on WP8 using cordova/phonegap

Question

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?

My icons display fine on android and ios

Answer 1

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

Getting a web-font to work on an HTML5 Windows Phone App?

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

becomes

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

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

Hope this help someone