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

Img vs Font Icon class name change disaster

5 Answers 52 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 16 Aug 2017, 08:21 PM

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? 

5 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 18 Aug 2017, 11:15 AM
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
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
Adam
Top achievements
Rank 1
answered on 18 Aug 2017, 03:05 PM

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. 

0
Magdalena
Telerik team
answered on 22 Aug 2017, 07:43 AM
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
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
Adam
Top achievements
Rank 1
answered on 23 Aug 2017, 03:05 PM

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

0
Magdalena
Telerik team
answered on 24 Aug 2017, 07:51 AM
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
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.
Tags
General Discussions
Asked by
Adam
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Adam
Top achievements
Rank 1
Share this question
or