Adam Nelson
Top achievements
Rank 2
Rank 2
Adam Nelson
asked on 30 Jan 2013, 12:48 AM
Hi Telerik,
I'm having a really hard time trying to figure out what icons are available in Kendo UI Mobile. I was able to get a list of class names by looking through the unminified stylesheet, but I noticed a lot of hex values were missing.
Attached is a screenshot I put together of a reference page, as you can see there are a lot of character codes without matching class names.
My question is can I create custom classes to enable the use of these unassigned character codes? Is there a chance of the font driving these images changing during an upgrade, or will new entries only be added to the font file?
Thanks,
Adam
I'm having a really hard time trying to figure out what icons are available in Kendo UI Mobile. I was able to get a list of class names by looking through the unminified stylesheet, but I noticed a lot of hex values were missing.
Attached is a screenshot I put together of a reference page, as you can see there are a lot of character codes without matching class names.
My question is can I create custom classes to enable the use of these unassigned character codes? Is there a chance of the font driving these images changing during an upgrade, or will new entries only be added to the font file?
Thanks,
Adam
3 Answers, 1 is accepted
0
Accepted
Hello Adam,
You've got us. Actually the icons there were being prepared for the Kendo UI Web icon font transition. However we need to have more icons for the Web suite (probably one font for every skin), thus the mobile font will be left as it is. We will add classes for most of the additional icons and may add some new ones to the font, but we won't remove any for sure, so you can add the classes yourself and use them in your page/app*. You probably know how to do that, but I'll tell you anyway :)
As you may know, when you set data-icon="custom", Kendo UI Mobile creates an element inside the item/button and sets it two classes - .km-icon and .km-[your_icon_name], in this case .km-custom. .km-icon takes care of everything needed, you only need to define content with the Unicode character for .km-custom:before and .km-custom:after which show the actual icon and its shadow if such should be shown. Add this class to define a ladybug icon:
.km-ladybug:after,
.km-ladybug:before
{
content: "\e0f8";
}
* Please note that the KendoUI icon font is part of the KendoUI suite. It is not permitted for use and/or distribution separately.
Kind regards,
Kamen Bundev
the Telerik team
You've got us. Actually the icons there were being prepared for the Kendo UI Web icon font transition. However we need to have more icons for the Web suite (probably one font for every skin), thus the mobile font will be left as it is. We will add classes for most of the additional icons and may add some new ones to the font, but we won't remove any for sure, so you can add the classes yourself and use them in your page/app*. You probably know how to do that, but I'll tell you anyway :)
As you may know, when you set data-icon="custom", Kendo UI Mobile creates an element inside the item/button and sets it two classes - .km-icon and .km-[your_icon_name], in this case .km-custom. .km-icon takes care of everything needed, you only need to define content with the Unicode character for .km-custom:before and .km-custom:after which show the actual icon and its shadow if such should be shown. Add this class to define a ladybug icon:
.km-ladybug:after,
.km-ladybug:before
{
content: "\e0f8";
}
* Please note that the KendoUI icon font is part of the KendoUI suite. It is not permitted for use and/or distribution separately.
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
Adam Nelson
Top achievements
Rank 2
Rank 2
answered on 30 Jan 2013, 04:49 PM
Very cool, thanks for the info.
0
Christopher Lee
Top achievements
Rank 1
Rank 1
answered on 07 Feb 2013, 06:44 PM
This is a HUGE help. Thanks Adam!