Button image

[Allan]

Hi all

Is it possible to add the kendo-button-image from the Grid buttons to a normal button?

I would like to add a template toolbar with 3 buttons and a search/filter field. But I can't figure out how the add the Create, Edit and Delete image to the buttons.

Thanks in advance.
Allan

[Dimo]

Hello Allan,

Simply use the same HTML markup and the icons will appear automatically, due to the usage of the required CSS classes - k-icon, etc.

<a href="#" class="k-button k-button-icontext k-grid-add"><span class="k-icon k-add"></span>Create</a>

k-button applies button styles - border-color, background and text color
k-icon applies width and height and a sprite image as a background
k-add (or another class) applies background-position style for the sprite image

Regards,
Dimo
the Telerik team

[Nathan]

I am trying to do the same thing. I used the exact sample HTML provided, but it does not work. I get a button with an icon, and NO text.

[Dimo]

Hello Keith,

The provided information does not suggest what might be the problem. Did you use Firebug to inspect the resulting HTML output and the applied CSS styles? This reveals the cause of the issue in all cases.

Regards,
Dimo
the Telerik team

[Shawn]

How do I apply this to a submit button on a Form?

[Dimo]

Hi Shawn,

You should use the same technique as the one demonstrated in my first reply above. The difference is that you will be using <button type="submit"> element.

Regards,
Dimo
the Telerik team