kendo classes and corresponding images or sprites ?

[Richard]

Is there a document that shows all the k-* classes and their corresponding sprites?

Thanks

[Dimo]

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

[Andrew]

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. 

[Dimo]

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

[Oscar]

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".

[Richard]

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.

[C]

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/

[Dimo]

Hello C,

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

All the best,
Dimo
the Telerik team

[Jeremy]

You rock, C. Thank you so much.

[Sean McLellan]

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...)
 

[Calvin]

Here's an update to csdietrich's fiddle for v2013.1.319

http://jsfiddle.net/calvindale/NJdjU/1/

[Dimo]

Hello,

You can also refer to:

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

Regards,
Dimo
the Telerik team

[Robert]

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

[Dimo]

Hi Robert,

Thank you for your kind words.

Regards,
Dimo
Telerik

[Simon]

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

[Dimo]

Hi Simon,

The Styling / Icons demo has been updated.

Regards,
Dimo
Telerik

 

 

[Hillary]

how do you make the icons in white instead of black?

[Dimo]

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

[gregory]

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. 

[Dimo]

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