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
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
0
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
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?
I used 64x64 icons with color #424243 (default icon color). is this colorcode mandatory or does every single color icon work?
0
Hello Florian,
The color is not important, only the transparency levels.
All the best,
Kamen Bundev
the Telerik team
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
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
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
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?
Anker
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
Hello Anker,
Yes, exactly.
Greetings,
Kamen Bundev
the Telerik team
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
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
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
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.
<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
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
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
<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
Hello Tariq,
The class names does not match. Please try the following:
For more information please check the icons help topic.
Regards,
Alexander Valchev
the Telerik team
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';
}
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
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
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.
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
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
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!
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!
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
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
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!
It works! Thanks!
Thanks!