This is a migrated thread and some comments may be shown as answers.

Custom Icons

21 Answers 912 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Florian
Top achievements
Rank 1
Florian asked on 27 Mar 2012, 04:56 PM
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

21 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 28 Mar 2012, 11:36 AM
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!
0
Florian
Top achievements
Rank 1
answered on 28 Mar 2012, 08:29 PM
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?
0
Kamen Bundev
Telerik team
answered on 29 Mar 2012, 08:10 AM
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!
0
Florian
Top achievements
Rank 1
answered on 29 Mar 2012, 11:24 AM
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 
0
Kamen Bundev
Telerik team
answered on 29 Mar 2012, 04:51 PM
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!
0
Anker Berg-Sonne
Top achievements
Rank 1
answered on 05 May 2012, 09:13 PM
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
0
Kamen Bundev
Telerik team
answered on 07 May 2012, 08:07 AM
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!
0
Anker Berg-Sonne
Top achievements
Rank 1
answered on 07 May 2012, 02:05 PM
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
0
Florian
Top achievements
Rank 1
answered on 21 Aug 2012, 04:32 PM
Is it possible to use icon fonts ?
0
Kamen Bundev
Telerik team
answered on 22 Aug 2012, 07:00 AM
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!
0
Chris
Top achievements
Rank 1
answered on 30 Jan 2013, 02:11 PM
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.
0
Kamen Bundev
Telerik team
answered on 01 Feb 2013, 03:06 PM
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!
0
tariq
Top achievements
Rank 1
answered on 20 Feb 2013, 07:26 AM
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
0
Alexander Valchev
Telerik team
answered on 25 Feb 2013, 08:08 AM
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!
0
Ralph
Top achievements
Rank 1
answered on 15 Jun 2013, 03:53 PM
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';
}
0
Kamen Bundev
Telerik team
answered on 17 Jun 2013, 07:21 AM
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!
0
Ralph
Top achievements
Rank 1
answered on 17 Jun 2013, 09:37 AM
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.
0
Kamen Bundev
Telerik team
answered on 19 Jun 2013, 10:49 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ralph
Top achievements
Rank 1
answered on 25 Jun 2013, 02:54 AM
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!
0
Kamen Bundev
Telerik team
answered on 26 Jun 2013, 11:40 AM
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!
0
Ralph
Top achievements
Rank 1
answered on 26 Jun 2013, 12:26 PM
Hi Kamen,

It works! Thanks!

Thanks!
Tags
TabStrip (Mobile)
Asked by
Florian
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Florian
Top achievements
Rank 1
Anker Berg-Sonne
Top achievements
Rank 1
Chris
Top achievements
Rank 1
tariq
Top achievements
Rank 1
Alexander Valchev
Telerik team
Ralph
Top achievements
Rank 1
Share this question
or