Img vs Font Icon class name change disaster

[Adam]

So I recently attempted to drop in the latest version of kendoUI (as of 8/16/2017) and found many formatting differences/issues.

The most annoying was how you decided to roll out font icons vs image icons - we now have missing icons all over the place. It would have been best if you just used the same css class name for the same icon.

Do you have a migrate .css file that will re-map them back, like most other UI libraries that make unnecessary breaking changes? 

[Magdalena]

Hello Adam,

Could you please specify what icons are missing? It would be helpful if you can also provide a sample in Dojo where the issue is reproduced.

Looking forward to your reply.

Regards,
Magdalena
Progress Telerik

[Adam]

This doesn't need a dojo example - it is all in your breaking changes release notes: 

http://docs.telerik.com/kendo-ui/backwards-compatibility/2017-backward-compatibility 

I am questioning the decision to rename all the icons, and hoping that you would provide a set of css that would allow the same icon css classes that were used in the prior releases to work in the current release. 

[Magdalena]

Hi Adam,

Despite of these changes, because of preventing breaking changes we kept old names of icons, so they still work. For example the new class name of down arrow icon is k-i-arrow-60-down. Even thought the old name k-i-arrow-s still works.

If there are some missing icons in your project, it is possible that some icon was missed and should be added to our inbuilt styles. So if you can provide what is the missing icon, or provide some Dojo sample, we can find that icon, or find some other reason of the issue.

Regards,
Magdalena
Progress Telerik

[Adam]

From kendo.common.min.css from the latest release contains a rule that is breaking it:

 

.k-column-menu .k-sprite, .k-gantt-views>.k-current-view>.k-link:after, .k-grid-mobile .k-resize-handle-inner:after, .k-grid-mobile .k-resize-handle-inner:before, .k-i-drag-and-drop, .k-icon, .k-pager-numbers .k-current-page .k-link:after, .k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link:after, .k-tool-icon{ ... background:none ... }

 

that is overriding the image icons to have a blank background

[Magdalena]

Hi Adam,

Thank you for the clarification of the case. The resetting of background image is applied because of preventing doubling icons - sprite with font-icons. If you would like to return back your custom sprite image, you can make it by the following:

.k-column-menu .k-sprite,
.k-gantt-views>.k-current-view>.k-link:after,
.k-grid-mobile .k-resize-handle-inner:after,
.k-grid-mobile .k-resize-handle-inner:before,
.k-i-drag-and-drop,
.k-icon,
.k-pager-numbers .k-current-page .k-link:after,
.k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link:after,
.k-tool-icon {
    background-image: url(url-to-the-sprite.png)
}

If you would like to remove all font-icons, you can achieve it by the following:

.k-icon:before {
    content: none !important;
}

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Progress Telerik