Custom Icons

[Florian]

Hello,
how to add custom icons for the tabstrip that work with the gradients?

i tried the recommended solution but the gradients aren't working. the default icons got svg masks but i guess they're is / has to be a way to add custom icons.
thanks in advance

[Kamen Bundev]

Hi Florian,

This is the recommended solution for setting a background image. However for the icons in Kendo UI Mobile we use a mask image. Something like this:
-webkit-mask-box-image: url('image.png');
You can use sprites, though you can only lay them out on one or multiple evenly sized rows or columns. If you want to use them, you will also need to adjust the background-size CSS property accordingly. Note that only the image alpha channel matters for the mask.

Regards,
Kamen Bundev
the Telerik team

[Florian]

Thanks Kamen, works great!
I used 64x64 icons with color #424243 (default icon color). is this colorcode mandatory or does every single color icon work?

[Kamen Bundev]

Hello Florian,

The color is not important, only the transparency levels.

All the best,
Kamen Bundev
the Telerik team

[Florian]

what size would you recommend? the default icons are 64x64 but even on desktop browsers they barely exceed 40x40. 
or just stick to the apple and android UI guidelines?
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html 
http://developer.android.com/guide/practices/ui_guidelines/icon_design_menu.html 

[Kamen Bundev]

Hi Florian,

I would recommend to make the icons 64x64 or even bigger if you target retina displays and set the icon background-size CSS property, so that they resize accordingly on each device. This way you don't have to worry about resolutions. If you refer to the default Kendo UI icons - we are using relative units (em and rem) for most dimensions and on desktop we make them smaller by lowering the font-size, so the icon size will look smaller than on a real mobile device.

All the best,
Kamen Bundev
the Telerik team

[Anker Berg-Sonne]

Where and how does -webkit-mask-box-image: url('image.png'); get applied?

Like this?

<style>
.km-custom {
  -webkit-mask-box-image: url("image.png");
}
</style>

<div data-role="tabstrip">
  <a href="#index" data-icon="custom">Home</a>
</div>

Anker

[Kamen Bundev]

Hello Anker,

Yes, exactly.

Greetings,
Kamen Bundev
the Telerik team

[Anker Berg-Sonne]

I finally got it to work.

To create an icon mask, follow the instructions on this page: http://greenerpastures.dk/blog/iphone-udvikling/how-to-make-tab-bar-icons

To get it to show up on your tab bar correctly do what I have done in the attached files.

Phew/Anker

[Florian]

Is it possible to use icon fonts ?

[Kamen Bundev]

Hello Florian,

Well, you can remove the background and the mask and use a pseudo-element (::before or ::after) with content set to the character you want.

Kind regards,
Kamen Bundev
the Telerik team

[Chris]

I am unable to insert custom icons with the following:

<style>
.km-custom {
  -webkit-mask-box-image: url("foo.png");
}
</style>

   <div data-role="tabstrip">
       <a href="#pm_mbb" data-icon="custom">PM MBB</a>
</div>

Ca someone please assit me as I am not too sure what to do.

[Kamen Bundev]

Hello Chris,

According to the documentation, you need to also add this rule:
.km-root .km-pane .km-view .km-question {
    background-size: 100% 100%;
    -webkit-background-clip: border-box;
    background-color: currentcolor;
}

and specify the icon color:
.km-question {
    -webkit-mask-box-image: url("foo.png");
    background-color: red;
}

Kind regards,
Kamen Bundev
the Telerik team

[tariq]

I am not able to show custom icon in my app .. here is the below code
<style>
        .km-root .km-pane .km-view .km-question {
    background-size: 100% 100%;
    -webkit-background-clip: border-box;
    background-color: green;
}
            .km-chart {
    -webkit-mask-box-image: url("chart.png");
    background-color: red;
}
            
            
            
        </style>

I put this code in index.html page

[Alexander Valchev]

Hello Tariq,

The class names does not match. Please try the following:

.km-root .km-pane .km-view .km-chart {
    background-size: 100% 100%;
    -webkit-background-clip: border-box;
    background-color: green;
}

.km-chart {
    -webkit-mask-box-image: url("chart.png");
    background-color: red;
}

For more information please check the icons help topic.

Regards,
Alexander Valchev
the Telerik team

[Ralph]

Hi, 

My app does show the custom icon correctly on Android 4.1, but the custom icon is NOT shown on 4.2.
Please help. 

The code snippet is as follow:
HTML: 
<div data-role="tabstrip">
                    <a href="#eventsview" data-icon="featured">Events</a>
                    <a id="messageViewLink" href="#messagesview" data-icon="chat">Chats</a>
                    <a href="#contactlistview" data-icon="contacts">Contacts</a>
</div>

CSS:
@font-face {
    font-family: "Hats";
    src: url("../fonts/-hats.woff") format("woff"),
         url("../fonts/-hats.ttf") format("truetype");
}
.km-chat:after,
.km-chat:before
{
    font: 1em/1em "Hats";
    content: '\f0e6';
}

[Kamen Bundev]

Hi Ralph,

We can't reproduce the issue with our fonts. Can you provide a sample page or a live URL where we can test this and help you fix it? You can open a support ticket if you prefer the privacy.

Regards,
Kamen Bundev
Telerik

[Ralph]

Hi,

I have submitted the ticket 705070.

BTW, I have also setup a simplified project on Icenium Mist.
The custom icon shows on the simulator, but when I build the APK and install it on my Galaxy Nexus, it is not shown.

How can I share the project on Icenium?

Thanks.

[Kamen Bundev]

Hi Ralph,

I replied to your ticket, but I'll copy the answer here, if someone else stumbles upon this Android 4.2 bug:

This seems like a bug in Adnroid 4.2 - similar issue is reported in the Android bug tracker - that some Unicode ranges doesn't get rendered in Android 4.2 WebView, while they worked fine in 4.1. The issue can be easily reproduced without Kendo UI Mobile:
<!DOCTYPE html>
<html>
    <head>
        <style>
            @font-face {
                font-family: "Hats";
                src: url("fonts/-hats.woff") format("woff"),
                     url("fonts/-hats.ttf") format("truetype");
            }
            
            div {
                font: 5em/1em Hats;
                color: red;
            }
        </style>
    </head>
    <body>
        <div>&#xf0e6;</div>
    </body>
</html>

The only workaround I can think of is that you should use the same Unicode range that we used for our font - starting from \E000.

Regards,
Kamen Bundev
Telerik

[Ralph]

Hi,

Still no luck to make it works on Android 4.2

I have attached my updated font files and CSS file in the support ticket.
I changed both the encoding of the icon and the css file to /e800
The icon is displayed correctly on iPhone emulator.

Thanks for your help!

[Kamen Bundev]

Hello Ralph,

I responded to your ticket, but I will post the answer here for completeness:

I pinned the bug down to this - the first character in a @font-face font in an Android 4.2 WebView seems to be always invisible. As a workaround add a dummy character before it, and it will render. I filed an Android bug report, which you may find here if you want to follow the case.

Regards,
Kamen Bundev
Telerik

[Ralph]

Hi Kamen,

It works! Thanks!

Thanks!