Hello,
I am upgrading my application to Kendo version 2023.3.1114 and during the upgrade I fell over the fact, that the <span> tags do not show their assigned icons anymore.
I am using the code as explained here in the Basic Usage section: Font Icons - Sass Themes - Kendo UI for jQuery (telerik.com)
<span class="k-icon k-font-icon k-i-calendar"></span>
But the icon is not shown. If I put a text in between the <span> only the text is displayed.
Also the Dojo example, which should show how to display the icon (Font Icons - Sass Themes - Kendo UI for jQuery (telerik.com)), does not work in the Dojo: Kendo UI® Dojo by Progress (telerik.com).
Here the code:
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.2.0/default/default-ocean-blue.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>
</head>
<body>
<span class="k-icon k-font-icon k-i-pencil"></span>
<span class="k-icon k-font-icon k-i-pencil k-flip-h"></span>
<span class="k-icon k-font-icon k-i-pencil k-flip-v"></span>
<span class="k-icon k-font-icon k-i-pencil k-flip-h k-flip-v"></span>
</body>
</html>
So is this a bug in Kendo? Or am I and the Dojo missing something?
Thank you for a clarification.
Best,
Jeannine
1 Answer, 1 is accepted
Hello Jeannine,
Starting with the 2023 R3 release the font icons are detached from the Kendo Themes CDN. Here is a link to the documentation where this is described. You can find more information on how to load the icons in the link here.
Please note, that as of the R1 SP1 2023 release, the Kendo UI for jQuery supports rendering of SVG icons instead of the traditional Font icons. I would suggest taking a look at the SVG icons article linked below:
- https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/svg-icons
I hope this helps.
Regards,
Neli
Progress Telerik
Rank 1
Hello Neli,
thank you for the links.
I have to admit I have seen the documentation before but for some reason I did not read the yellow information box in which all the required information was listed. Shame on me :D
So anyways, thank you for helping me out on this.
Best,
Jeannine