[WP8] Ionicons not display



I have problem with Ionicons on Windows Phone 8. On device the app works properly but icons are not displaying. Only white rectangle. I attach screen http://pl.tinypic.com/r/o9nu9y/8

The project has locally reference to ionic files.

On Android the problem not exists.

What is a problem?


Windows phone 8 design issues

Right now, there isn’t full support for WP8. That being said, this seems like a common issue for WP8 based on some digging on StackOverflow.

Best bet right now is to hold on until full support for WP8


I posted a link to a StackOverflow question in the other WP8 thread.

Other thread in ionic forum


Oh boy, looks like some nasty stuff for windows phone :frowning:
Thanks for the info, seems maybe a png fallback may have to come into play…


You could try loading ionicons directly from the CDN. Place this after ionic.css:

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.4.1/css/ionicons.min.css">


it works :wink: Thanks



Why does it work when you link to the online version, but downloading the online version and pointing to it locally doesnt?

My app is maining for offline use so dont want to point to an online version


@NemisisJedi take a look at this SO post


I was able to get the icons to show up locally in the WP8.1 emulator and device by following this method:

Specifically, removing the querystring from ttf font-face declaration worked for me:
url("#{$ionicons-font-path}/ionicons.ttf") format(“truetype”),
//url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format(“truetype”),

Ionic and Windows Phone 8 - working
App is not working in Windows Phone

You must convert the font of ionicons in base64, and perform the embed font in own css.

@font-face { font-family: "Ionicons"; 
             src: url(data:application/x-font-eot;charset=utf-8;base64,<base64 code>);
             src: url(data:application/x-font-eot;charset=utf-8;base64,<base64 code>) format("embedded-opentype"),
                  url(data:application/x-font-ttf;charset=utf-8;base64,<base64 code>) format("truetype"),
                  url(data:application/x-font-woff;charset=utf-8;base64,<base64 code>) format("woff"),
                  url(data:application/x-font-svg;charset=utf-8;base64,<base64 code>) format("svg");
              font-weight: normal; font-style: normal; }


Has this been added/recognized by Ionic?