Windows phone 8 design issues

Hello Ionic geeks,
I had developed android app using ionic and which works great. Now i am developing same app for windows phone 8. All design looks worse. Some main problems are:

  • Icons are not showing…just box is displayed instead of icon.
  • when i pull down contents it does not goes to it’s default location as in ios and android.

Lomas Joshi

Hey Lomas,

ionic gives no windows phone (IE mobile) support in the beta phase. :wink:

mobile IE does not support the icon-font correctly, thats why you see “boxes” instead of icons.

Greets, bengtler

Hello bengtler,
Thanks for your reply.
But i am surprised that is there any way to hack ionic for the below point.

  • “when i pull down contents it does not goes to it’s default location as in ios and android.”

Lomas Joshi

Yeah, because maybe css or javascript is not IE optimized/supported or maybe your css code is not IE compatible.

But a ionic guy may clearify that (if they want ^^).

So maybe we have luck and get ie mobile support with the final version

We’ve had the same issues, but now we have a fairly smooth running windows phone and windows 8 ionic app. The most important fixes were:

1: Loading fonts from local filesystem don’t work, but loading from a CDN does: [WP8] Ionicons not display

2: Set overflow-scroll="true" on your <ion-content> to disable Ionic’s virtual scrolling (which is clearly not designed to work with IE) and use IE’s native webscrolling

3: Stick with beta6 because the latest version enables page-animations, which are clearly not designed with IE support in mind. Or maybe you can use beta8 with that animation disabled, but I haven’t tried that.

Good luck and let me know if you run into any other problems, because I’ve probably had the same problem :smile:


Hello dj_hoek,
i would like to thanks you for your great reply.
I am able to fix my scrolling issue as you suggest, and it works great.
Icons also works file if i use online link to stylesheet.

<link rel="stylesheet" href="">

but unfortunately i cannot load css from CDN as my app should work on offline mode.

Any solutions for this??

Lomas Joshi

You’re welcome :slight_smile: That issue with IE not being able to load fonts from filesystem is a nasty one. I’ve pretty much settled with icons only working when you’re online, sad but true. I think we have 2 options:

  1. Wait for IE to get this issue fixed
  2. Customize Ionic’s css so it refers to png-images instead of fonts

But I wouldn’t know exactly where to start on the second option.

Maybe you’ll find this thread useful. Someone in that thread references to this one offering a solution, for which someone created a sample app here.

1 Like

Thanks dj_hoek,

I fixed the issue by using bootstrap 2 icons as it uses png-images instead of fonts.

Lomas Joshi

The icon issue can be fixed by embedding the font file as base64 in the css directly.
An example and more tips for Windows Phone 8 optimizations can be found at

Let’s hope Windows Phone support comes soon.