CODEWITHSUNDEEP
cordovawindows-phone-8angular-ui-bootstrapfont-awesome
Gillardo
Gillardo

Reputation: 9828

FontAwesome displaying as squares on WP8 using cordova/phonegap

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

Upvotes: 5

Views: 5387

Answers (1)

Gillardo
Gillardo

Reputation: 9828

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

Upvotes: 14

Related Questions