Icon Fonts on Windows Phone (Sencha Touch)

I think everyone who deploy a first app on Windows Phone is facing the same problem: The app is running fine, but where the heck are my icons?

Apparently there is an issue present in Windows Phone 8 that prevents custom font-faces from working when HTML and CSS are hosted locally.

So we came up with the first solution: Hosting everything remote. But really, this is not a solution, right?

After spending some more time on google, I found another solution: Including the font-file instead of the base 64 encoded font.

Sample Code:

@font-face {
 font-family: 'Pictos';
 src:url('fonts/pictos-web.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

However, this code never worked for me. Some user reported that it works, but the rest said that it doesn't work for them too or only for some and not all of their font files.

Finally I came up with another idea: When I cannot rely on the CSS font-face, then I'll go back to the roots and display pictures instead. Of course this costs more effort and is not as elegant as using icon fonts, but so far this seems to be the only safe solution to get it done.

Before we start, let me tell you that we don't have to modify any of the Java Script Code and it will not affect other platforms like Android or iOS.

If you are already working with Themes (what I would suggest you) then you can just place the new CSS code to your WP.scss

To reduce the CSS markup, I created a small mixin. In this mixin we set a new background image with height and width, also we replace the characters in content with an empty string:

@mixin wpIcon($name,$dim) {
  $url:"../images/wp/#{$name}.png";
  background: transparent url($url) 0 0 no-repeat;
  content: '';
  height: $dim;
  width: $dim;
  display: inline-block;
}

The sample code above requires that your images are located in "/resources/images/wp".

Replacing images is very straight forward, lets take a look at another sample which shows how to use this mixin:

/* Replace the checkbox checked icon */
.x-input-checkbox:checked ~ .x-field-mask:after {
  @include wpIcon(checkmark, 20px);
}

/* Replace the back button icon and add a second rule for back button pressed */
.x-button-back:before {
  @include wpIcon(arrow-left, 32px);
}

.x-button-back.x-button-pressing:before {
  @include wpIcon(arrow-left-pressed, 32px);
}

As you can see we just pass the image name (without the file extension) + a size to the mixin.

If you don't use the WP.scss yet you can add ".x-windowsphone" as an additional class to your CSS rule. This makes sure that the rule will only apply on Windows Phone.

I hope this trick help you to get your icons back on Windows Phone. Please let me know when you have even a better idea/solution for this problem.