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

kendo classes and corresponding images or sprites ?

19 Answers 1983 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 10 Apr 2012, 07:23 AM
Is there a document that shows all the k-* classes and their corresponding sprites?

Thanks

19 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Apr 2012, 02:24 PM
Hello Richard,

To begin with, I recommend you to take a look at the Appearance and Styling help article (if you haven't already done so), which outlines the most important CSS classes used across the Kendo widgets.

With regard to icon CSS classes and sprite images, we have no explicit documentation, as tweaking sprites and modifying corresponding styles is generally for front-end developers that are already familiar with the theory and can quickly find what they need. However, if you need to know more about the sprites and styles, you can use the following information:

kendo.common.css - line numbers, widgets and sprite images:

205 - 257 : various icons (sprite.png)
2297 - 2313 : Editor icons (sprite.png)
2646 - 2688 : Slider ticks (slider-h.gif and slider-v.gif)
2808 - 2860 : Tooltip callouts (sprite.png)
2995 - 3005 : Splitter icons (sprite.png)
3099 - 3111 : Upload icons (sprite.png)

If you need more information, please explain what are you trying to do, so that I can provide more relevant advice. If needed, I can send you a specified theme's sprite PSD file with layers and guides, so that you can easily see which icon goes where and replace only what you want.

Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrew
Top achievements
Rank 1
answered on 16 Apr 2012, 12:17 AM
Right now I'm having to discover the icons by reverse engineering - scanning the CSS files and visually scanning the sprite.png images.

I don't understand why telerik doesn't just put up a page displaying all of the sprite images and their corresponding CSS classes. 


0
Dimo
Telerik team
answered on 16 Apr 2012, 09:52 AM
Hi all,

Everybody, which is interested in this topic, please describe the most common scenarios in which you need to modify sprite-related CSS code and images, so that we know how to structure the documentation to be of greatest benefit. For example, do you modify only a couple of images or all of them, do you modify images of one widget or all widgets, do you create custom sprites or use a combination of the built-in sprites and custom standalone icons, etc.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Oscar
Top achievements
Rank 1
answered on 16 Apr 2012, 11:10 AM
Hi Dimo,
In my case, sometimes I only want to change a couple of images. For example, I want to use a trash can image instead of a cross icon for deleting records in a grid, as I use a cross image exclusively for closing windows. Kendo uses the same cross icon for both closing windows and deleting records in a grid.
Sometimes, I need to change the color of all of them (e.g white) or putting them within a circle.

Regards.

P.S. It would be nice if you provided a "metro style/android trash can icon".
0
Richard
Top achievements
Rank 1
answered on 16 Apr 2012, 12:36 PM
The cases for a listing of the k- classes with corresponding sprites are:
  1. Complete documentation
  2. Help determine if I could reuse a k- class for some custom visual feedback during certain drag and drop operations.
0
C
Top achievements
Rank 1
answered on 18 May 2012, 07:33 AM
I had this very same need. Thus after digging into the CSS file for all classes with a background-position, I came up with a little over 60. I went ahead and created an example that references these sprite icons. I skipped some of the slider icons and a few others that seemed less likely to be used.

Enjoy

http://jsfiddle.net/csdietrich/LVVPH/
0
Dimo
Telerik team
answered on 18 May 2012, 08:09 AM
Hello C,

Thanks for sharing. I am awarding you some Telerik points for that.

All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeremy
Top achievements
Rank 1
answered on 23 May 2012, 07:23 PM
You rock, C. Thank you so much.
0
Sean McLellan
Top achievements
Rank 1
answered on 04 Sep 2012, 02:56 AM
This is horrible

there isn't a corresponding sheet such as http://twitter.github.com/bootstrap/base-css.html#icons that makes this absolutely easy?! 

C's post is nice... but it doesn't include 'spriteCssClass' entries (pdf, image, folder, rootFolder, etc...)
 
0
Calvin
Top achievements
Rank 2
answered on 20 Mar 2013, 09:21 PM
Here's an update to csdietrich's fiddle for v2013.1.319

http://jsfiddle.net/calvindale/NJdjU/1/
0
Dimo
Telerik team
answered on 21 Mar 2013, 07:27 AM
Hello,

You can also refer to:

http://demos.kendoui.com/web/styling/icons.html

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
answered on 15 Jul 2013, 01:52 AM
Hi Everyone,

I'm new to Kendo, but I've been at it every waking moment for about a week. I'm amazed that this one package (in combination with JQuery) has everything I need to build an amazing web application.

I also think it's awesome that Kendo provides an extensive list of sprite icons we can use in our applications. That, combined with the theme support will really help produce a consistent, professional look. Unfortunately, not all of the icons I need are in included. For example, there's no question mark (?) icon for my tooltips.

Does anyone know if anyone has extended the available icons and is selling them? They would have to be consistent with the ones Kendo provides, or be "close enough". Or does anyone know if there's a tutorial anywhere on adding additional Kendo icons?

Thank you,

Robert
0
Dimo
Telerik team
answered on 15 Jul 2013, 07:38 AM
Hi Robert,

Thank you for your kind words.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Simon
Top achievements
Rank 1
answered on 17 Dec 2014, 05:23 PM
Hello,

Sorry to bump this tread but is there any update regarding the icons document?

Sure, kendo has a styling example but it's many icons are not listed there.  Calvin example has more icons but some are still missing (like the k-i-sort-asc and k-i-sort-desc).

Kendo's staff took some time to make a lot of great icons so I think it's unfortunate that we can't use all of them just because we don't know they exist.  A simple official list or an up-to-date sample would take only few minutes to do but it would benefit to every developers.

Regards,

Simon




0
Dimo
Telerik team
answered on 22 Dec 2014, 02:41 PM
Hi Simon,

The Styling / Icons demo has been updated.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Hillary
Top achievements
Rank 1
answered on 19 Sep 2016, 07:50 PM
how do you make the icons in white instead of black?
0
Dimo
Telerik team
answered on 20 Sep 2016, 08:00 AM
Hi Hillary,

Currently, this can be achieved only with a custom sprite image, or a custom background image for a specific icon CSS class.

In the future, when we drop legacy browser support and switch to font icons, the icon color will be changed a lot more easily. However, I am not able to provide a time frame for that.

Regards,
Dimo
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
gregory
Top achievements
Rank 1
answered on 29 Sep 2016, 08:50 AM
I actually agree that there is a need for Telerik to provide more documentation on these images and classes (k-alt, etc). I've been doing design and programming for 20 years, and I am very conscious about design- indeed- that is what attracted me to Kendo in the first place! My users can choose their own 'skin' (theme), and the controls are rich. Now, I want to reuse them so I will continue to let my users choose their own 'skin'. I am not going to design custom images that match each them, but I would like to reuse the stuff that Telerik developers use. I get that if you show stuff, it may get stolen, but even so, those who use it for free and are extending off of your own classes and themes, and if they spend that much time working with the innards of your project, they will come to you anyway one would think. 
0
Dimo
Telerik team
answered on 29 Sep 2016, 11:21 AM
Hi all,

This discussion started before the following two resources existed. Now the sprite icons and their CSS classes are demonstrated in the following example:

http://demos.telerik.com/kendo-ui/styling/icons

The font icons are showcased on the following documentation page:

http://docs.telerik.com/kendo-ui/styles-and-layout/icons-web

The exact background position styles, and the exact pseudo-element content styles, these can be seen in the browser's DOM inspector. This will also reveal the specificity that is used, so that a developer can use a higher one, if overriding is necessary.

Regards,
Dimo
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Tags
General Discussions
Asked by
Richard
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Andrew
Top achievements
Rank 1
Oscar
Top achievements
Rank 1
Richard
Top achievements
Rank 1
C
Top achievements
Rank 1
Jeremy
Top achievements
Rank 1
Sean McLellan
Top achievements
Rank 1
Calvin
Top achievements
Rank 2
Robert
Top achievements
Rank 1
Simon
Top achievements
Rank 1
Hillary
Top achievements
Rank 1
gregory
Top achievements
Rank 1
Share this question
or