WP8& custom icons

[Kenneth]

Porting my web fonts over for WP8.

I've specified my custom font like this.

.km-root .km-pane .km-view .km-mail2 {
    background-size: 100% 100%;
    -webkit-background-clip: border-box;
    background-color: currentcolor;
}
 
.km-mail2 {
    -webkit-mask-box-image: url("mail.png");
    background-color: red;
}

And, I've attached the file I'm using. It works in Android/iOS (if I substitute this for the web font. But, in WP8 it looks liike a solid white square. Any ideas?

[Kamen Bundev]

Hello Kenneth,

I'm not sure I understand - you talk about web fonts but you've posted CSS for setting WebKit masks. If the font is your problem - web fonts are not supported in PhoneGap for WP8 (an omission on the Microsoft side - they are also not supported in HTML5 apps) - this was the reason we fall back to simple images for icons in WP8 appMode in the internal builds. If your question is why the masks don't work - the reason is that they are a WebKit only feature and not supported in IE10 - just use normal PNG images for icons. If you use a newer internal build, you can add your icon in the after pseudo-element that we use for our icons:
.km-on-wp.km-app .km-mail2:after
{
    background: url("mail.png");
}

Note that this pseudo element has set background-size: auto 100% and will resize your icon to 100% vertically - we do this in order to use horizontally distributed sprites for the icons.

All the best,
Kamen Bundev
the Telerik team

[Kenneth]

Still doesn't work. Guessing it's a problem with the format of the PNG file. Are there any special requirements?

[Kamen Bundev]

Hi Kenneth,

No special requirements - it is just a background image. It would be easier if you post a sample page or a live URL where I can check out what happens. I can convert this forum thread to a support ticket if you don't want to share these on the forum. Let me know if you want me to do that.

All the best,
Kamen Bundev
the Telerik team

[Kenneth]

Sample project that demonstrates the issue. 

[Kamen Bundev]

Hi Kenneth,

You've left a space between .km-on-wp and .km-app, where there shouldn't be one. This however is not the only issue - in my example I didn't specify the content for the after element, and it should have one in order to be visible. I updated the CSS and in the next internal build it would be easier to set a background image for the icon. I've also updated your points. Currently you can override the background-image like this:
.km-on-wp.km-app .km-test:after,
.km-on-wp.km-app .km-tabstrip .km-state-active .km-test:after
{
    content: "\a0";
    background-image: url("test.png");
}

Kind regards,
Kamen Bundev
the Telerik team

[Kenneth]

Worked like a charm. Thanks.

[Kenneth]

One last question. When I use this for buttons in WP8, when I tap the button and the button highlights the icon is not correct. Assuming I need a reverse-icon but not sure how to specify that in my stylesheet. Can you explain?

[Kamen Bundev]

Hello Kenneth,

The override I sent you was just for the TabStrip icons active state. However, if you're running the last internal build I mentioned, you can simplify it like this:
.km-wp.km-on-wp.km-app .km-test:after
{
    background-image: url("test.png");
}

And it should fix both the TabStrip and the Button active states.

Greetings,
Kamen Bundev
the Telerik team

[Kenneth]

Does not work. 

Just to be sure - I installed the latest internal build (.415) again, and used your CSS:

.km-wp.km-on-wp.km-app .km-test:after
{
    background-image: url("test.png");
}

When I did this it didn't use the correct icon at all.

I then reverted it back to the original CSS

.km-on-wp.km-app .km-test:after,
.km-on-wp.km-app .km-tabstrip .km-state-active .km-test:after
{
    content: "\a0";
    background-image: url("test.png");
}

and it worked as expected (with the button active state still not working). Double checked everything. Seems like I did it exactly as you suggested, but did not work.

Any other thoughts?

[Kamen Bundev]

Hi Kenneth,

Just tested it here and it works okay with .415 and the CSS I last sent you. I've added the CSS rule to the end of your main.css (it should be added somewhere after the kendo.mobile.all.min.css link, but doesn't really matter where exactly).

Greetings,
Kamen Bundev
the Telerik team

[Kenneth]

I discovered that when I removed the CSS meant for platforms other than WP8 it works in WP8.

.km-test:before, .km-test:after {
    font: 1em/1em "awesome";
    content: '\2713';
}

This is probably an ignorant question, but I'm not sure how to express the above and still make it work with the WP8 css. Can you advise?

[Kamen Bundev]

Hi Kenneth,

This is strange - the specificity of this rule is rather low and shouldn't be affecting the WP8 icon. I've tried adding it here and the icon was still working with it. This means that the real problem is probably somewhere else.

Maybe not the best solution but if you can't find it, you can use platform specific classes to avoid the issue, like this:
.km-ios .km-test:before,
.km-ios .km-test:after,
.km-android .km-test:before,
.km-android .km-test:after
{
    font: 1em/1em "awesome";
    content: '\2713';
}

However you'll need to add this for every custom icon you have.

Kind regards,
Kamen Bundev
the Telerik team