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

Button image

5 Answers 558 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Allan
Top achievements
Rank 1
Allan asked on 06 Feb 2012, 03:34 PM
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

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 06 Feb 2012, 04:49 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nathan
Top achievements
Rank 1
answered on 23 Mar 2012, 01:26 PM
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.
0
Dimo
Telerik team
answered on 23 Mar 2012, 01:44 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shawn
Top achievements
Rank 2
answered on 22 Jan 2013, 04:05 AM
How do I apply this to a submit button on a Form?
0
Dimo
Telerik team
answered on 22 Jan 2013, 08:17 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Allan
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Nathan
Top achievements
Rank 1
Shawn
Top achievements
Rank 2
Share this question
or