Add space between spriteCssClass icon and text in button

3 posts, 1 answers
  1. Anna
    Anna avatar
    64 posts
    Member since:
    Jul 2015

    Posted 30 Oct 2015 Link to this post

    Hi kendo team,

    In kendo button (or other widgets like toolbar that  uses button), there are 3 ways of defining the button icon - imageUrl, icon, and spriteCssClass. I'm using spriteCssClass property of kendo button to define my customized icon. When I define a kendo button with spriteCssClass and text, the text is squashed against my ​spriteCssClass defined icon. Also, I want it so that when there is no text, my button doesn't have a odd extra whitespace on the right. (See example: 

        text: "button text"
        spriteCssIcon: "my-custom-icon-css"

    When use icon property to define a button icon, there is a fine whitespace between the icon and text. How can I achieve this with spriteCssClass? Or better yet, can you help to fix it so the spriteCssClass will act just like the icon added through the icon property?



  2. Answer
    Dimiter Topalov
    Dimiter Topalov avatar
    894 posts

    Posted 02 Nov 2015 Link to this post

    Hi Ama,

    You can separate the text from the icon by using an additional CSS style:

    .k-toolbar .k-button-icontext .k-sprite {
      margin-right: 5px;

    Feel free to adjust the distance between the icon and the text with the margin-right property value. 

    Using this approach guarantees that there will not be an extra white space on the right of the icon when there is no text, because the k-button-icontext class is applied only to Toolbar buttons that have icon and text.

    By the way, we will add a CSS rule similar to the above in the future Kendo UI versions.

    Let us know if you have further questions.

    Dimiter Topalov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Anna
    Anna avatar
    64 posts
    Member since:
    Jul 2015

    Posted 02 Nov 2015 in reply to Dimiter Topalov Link to this post

    Thanks for replying. That's great news. =)
Back to Top