Button image

6 posts, 0 answers
  1. Allan
    Allan avatar
    5 posts
    Member since:
    Dec 2011

    Posted 06 Feb 2012 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 06 Feb 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Nathan
    Nathan avatar
    6 posts
    Member since:
    Jan 2012

    Posted 23 Mar 2012 Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 23 Mar 2012 Link to this post

    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!
  6. Shawn
    Shawn avatar
    49 posts
    Member since:
    Jul 2011

    Posted 21 Jan 2013 Link to this post

    How do I apply this to a submit button on a Form?
  7. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 22 Jan 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready