Custom Icons in Kendo UI for jQuery TabStrip (Mobile)

Florian

9 posts

Member since:
Jun 2012

Posted 27 Mar 2012 Link to this post

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

Admin

1532 posts

Posted 28 Mar 2012 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Florian

9 posts

Member since:
Jun 2012

Posted 28 Mar 2012 Link to this post

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

Admin

1532 posts

Posted 29 Mar 2012 Link to this post

Hello Florian,

The color is not important, only the transparency levels.

All the best,
Kamen Bundev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Florian

9 posts

Member since:
Jun 2012

Posted 29 Mar 2012 Link to this post

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

Admin

1532 posts

Posted 29 Mar 2012 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Anker Berg-Sonne

37 posts

Member since:
Sep 2009

Posted 05 May 2012 Link to this post

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

Admin

1532 posts

Posted 07 May 2012 Link to this post

Hello Anker,

Yes, exactly.

Greetings,
Kamen Bundev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Anker Berg-Sonne

37 posts

Member since:
Sep 2009

Posted 07 May 2012 Link to this post

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

Test.zip

Florian

9 posts

Member since:
Jun 2012

Posted 21 Aug 2012 Link to this post

Is it possible to use icon fonts ?

Kamen Bundev

Admin

1532 posts

Posted 22 Aug 2012 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Chris

1 posts

Member since:
Jan 2013

Posted 30 Jan 2013 Link to this post

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

Admin

1532 posts

Posted 01 Feb 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

tariq

1 posts

Member since:
Jun 2011

Posted 20 Feb 2013 Link to this post

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

Admin

2891 posts

Posted 25 Feb 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Ralph

33 posts

Member since:
Oct 2012

Posted 15 Jun 2013 Link to this post

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

Admin

1532 posts

Posted 17 Jun 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Ralph

33 posts

Member since:
Oct 2012

Posted 17 Jun 2013 Link to this post

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

Admin

1532 posts

Posted 19 Jun 2013 Link to this post

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></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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Ralph

33 posts

Member since:
Oct 2012

Posted 24 Jun 2013 Link to this post

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

Admin

1532 posts

Posted 26 Jun 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Ralph

33 posts

Member since:
Oct 2012

Posted 26 Jun 2013 Link to this post

Hi Kamen,

It works! Thanks!

Thanks!