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

spriteCssClass is not working with Icons in latest version?

10 Answers 379 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 18 Apr 2017, 07:40 PM

My code is like this because I want to have a button with search icon so :

 
 $("#tcOptions").kendoButton({
        spriteCssClass: "k-icon k-i-search",
        click: onOptionsBtnClick
    });
 

 

but the browser generated my button into something with k-sprite in front of my css like this :

<span class="k-sprite k-icon k-i-search"></span> will not show icon 

 

Consequently nothing is showing unless I manually remove this k-sprite from my button css in HTML:

<span class=" k-icon k-i-search"></span> will show icon  

 

Btw, it is not working since I upgraded my kendoUI into this version Kendo UI v2017.1.223 

Any help? Thanks,

<span class="k-sprite k-icon k-i-search"></span>

<span class="k-sprite k-icon k-i-search"></span>

 

10 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 20 Apr 2017, 07:44 AM
Hello Alex,

Since the introduction of font icons in Kendo R1 2017 you can use the icon option instead of the spriteCssClass one, for example:
$("#button").kendoButton({
    icon: "k-icon k-i-search"
});

Through icon the integrated font icons are used instead of setting the span element's background image as the spriteCssClass did in previous releases. spriteCssClass adds the k-sprite class to the span element and default Kendo styles are applied to that element through that class.
Even though using the icon option is recommended in the latest release the spriteCssClass option can still be used (instead of icon) in the newer versions (R1 2017 onward), but custom styles would need to be added so that the desired image is set as a background.

Regards,
Ivan Danchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Frank
Top achievements
Rank 1
answered on 20 Apr 2017, 02:48 PM

Hi Ivan, 

Can you provide some code if we want to keep the spirteCssClass option? Its used in a bunch of places and I would prefer not having to change everything to icon

Thanks

0
Ivan Danchev
Telerik team
answered on 21 Apr 2017, 11:53 AM
Hi Frank,

Here's a dojo example that shows how to set and display the search icon using the Silver theme's sprite image. 

Regards,
Ivan Danchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Frank
Top achievements
Rank 1
answered on 25 Apr 2017, 08:10 PM

Hi Ivan,

Thanks for the link, it works but looks a bit tedious to implement, so I've gone back and decided on the other approach.

I've changed all spriteCssClass property to icon property in my app via a mass text replace in my Javascript files, changing spriteCssClass: "k-icon to icon: "k-icon .

It looks like this worked in most places, but there are still a few places where the image isn't showing or looking weird (looks like its loading from a sprite.png from a different theme). 

Any ideas why this might be? I just got too many instances of spriteCssClass to go through them one by one.

Thanks,

0
Ivan Danchev
Telerik team
answered on 27 Apr 2017, 10:39 AM
Hello Frank,

I cannot say with certainty since I am not sure which particular widgets you have issues with after replacing spriteCssClass with icon, but have in mind that at present not all widgets have the icon configuration option. This thread's original subject is the Button, which does have an icon option but the Menu's items for instance currently do not have it, thus replacing their spriteCssClass option with icon will not produce the desired result.

Regards,
Ivan Danchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lorena
Top achievements
Rank 1
answered on 09 Feb 2018, 11:52 PM

Hello, this worked for me.

 

items.Add().Text("<span class=\"k-icon k-i-pencil\"></span> HOME").Encoded(false);

0
Ivan Danchev
Telerik team
answered on 13 Feb 2018, 12:45 PM
Hello Lorena,

This approach is straightforward and does not require applying custom CSS classes to the item and associating CSS rules with them. Thank you for posting it.

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 06 Sep 2018, 11:30 AM

Hello, 

Since problem described here is similar to one I am posting here, but if I should start separate topic, please let me know.

We recently upgraded to latest version (2018.2.620) from old one (2016.2.504). On most places all widgets are ok, but in certain place, my tree view widget doesn't display icons on command buttons (command: ["edit", 'destroy']). When I manually overwrite current (latest) kendo.common.min.css on the server, icons are displayed, but wrong icon is displayed on edit button (chevron up I think). Also, on the same column, i have some classes applied on attrbutes, but headerAttributes are applied while attributes are not.

 

This is code for the column:

{
title: "edit",
attributes: {
'class': 'c-centered'
},
headerAttributes: {
'class': 'k-header c-centered'
},
command: ["edit", 'destroy'],
width: 135,
locked: true
}

Thanks

0
Ivan Danchev
Telerik team
answered on 10 Sep 2018, 06:53 AM
Hello Vedad,

You mentioned having issue with the TreeView's icons, however the TreeView does not have command configuration. The TreeList widget, which also displays hierarchical data, does have such configuration and allows showing command buttons. If you are having issues with the TreeList's icons please open a new thread in its forum section or submit a support ticket with product TreeList.

Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 10 Sep 2018, 02:14 PM

Hi Ivan,

you are right, what i meant it was TreeList, it was typo on my side as I am working on TreeView as well.

 

Thanks for the help.
Best regards

Tags
General Discussions
Asked by
Alex
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Frank
Top achievements
Rank 1
Lorena
Top achievements
Rank 1
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or