Add space between spriteCssClass icon and text in button

[Anna]

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: http://dojo.telerik.com/Ezuga) 

{
    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?

 

 

[Dimiter Topalov]

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.

Regards,
Dimiter Topalov
Telerik

[Anna]

Thanks for replying. That's great news. =)