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

Missing icons when I use the Kendo CDN

8 Answers 2380 Views

General Discussions

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

Logan asked on 15 Feb 2017, 04:31 PM

kendo-missing-icons.png

I switched my asp.net + kendoui website to use the Kendo CDN and now I am missing the (some?) icons from the grid. I am getting the errors below that appear to be coming from the redirects on kendo's side.

I am thinking I must be doing something wrong, but am not sure where to go from here.

The are:

HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://kendo.cdn.telerik.com/source/web/kendo.default.mobile.css
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://kendo.cdn.telerik.com/source/web/kendo.default.css
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://kendo.cdn.telerik.com/source/web/kendo.common.css

Website Pic http://imgur.com/a/Oh03a

The relevant code in my _Layout file is:

01.@{

02.[snip]

03. var kendoVersion = "2017.1.118";

04.}

05.

06.<!DOCTYPE html>

07.<html>

08.<head>

09. <meta charset="utf-8" />

10. <meta name="viewport" content="width=device-width, initial-scale=1.0">

11. <title>@ViewData["Title"]</title>

12.

13. <script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>

14. <script src="//kendo.cdn.telerik.com/@(kendoVersion)/js/jquery.min.js"></script>

15. <script src="//kendo.cdn.telerik.com/@(kendoVersion)/js/kendo.all.min.js"></script>

16. <script src="//kendo.cdn.telerik.com/@(kendoVersion)/js/kendo.aspnetmvc.min.js"></script>

17.

18.

19. <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

20. <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />

21.

22.

23. @*Kendo*@

24. <link rel="stylesheet" href="//kendo.cdn.telerik.com/@(kendoVersion)/styles/kendo.common.min.css" />

25. <link rel="stylesheet" href="//kendo.cdn.telerik.com/@(kendoVersion)/styles/kendo.default.min.css" />

26. <link rel="stylesheet" href="//kendo.cdn.telerik.com/@(kendoVersion)/styles/kendo.default.mobile.min.css" />

27.

28. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />

29.

30. @Styles.Render("~/Content/css")

31.

32. @RenderSection("head", required: false)

33. 

34. @Html.Raw(application.HTMLHeader)

35. 

36.</head>

37.[snip]

Thanks,

Logan

8 Answers, 1 is accepted

answered on 17 Feb 2017, 03:36 PM

Hello Logan,

Thank you very much for taking the time to get in touch regarding the missing resources.

1) 404 error

The 404 error results from the mapping of the minified CSS files.You should not be experiencing any loss of styles, sprites, icons, etc. The issue only occurs when the developer tools in Edge are open. Тhe sole purpose of source mapping is to aid developers with debugging.

We have logged and fixed this issue recently. I have reopened it now to investigate why it has reappeared and you may follow its progress at:

https://github.com/telerik/kendo-ui-core/issues/2460

2) Missing icons

We replaced all the sprites with font icons.If everything is working normally, you should see a request made for a using the CDN service:

If you wish to try loading the kendo CSS files locally, you should include the fonts in a folder as shown here:

http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#theme-related-folders

I tried to recreate the missing icons to no avail - I added the same CSS links to one of our demos as you have in the application, in the same order:

http://dojo.telerik.com/oZaJan

3) Bootstrap theme

I can see that you are using Bootstrap in the application, I would recommend using the kendo-bootstrap CSS files instead of the default theme. More information on integration with Bootstrap is available at:

http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap

Let me know how you get on.

Kind Regards,
Alex Hajigeorgieva
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 visualisation (charts) and form elements.

answered on 28 Mar 2017, 02:20 PM

Alex,

Thanks for the response.

I understand and am not all that concerned about the 404 on the .map files.

I am getting the request for https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf?gedxeo and it looks like it is getting a 200 result. The strange thing is that some of the icons work as expected, for example the edit button icon shows, but not the add button and the sort icon appears to be getting doubled up..

See screenshot: http://imgur.com/a/GRssW

Add button html:

<div class="k-header k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-add" href="/Instructor/Instructor_Read?instructor-grid-mode=insert"><span class="k-icon k-add"></span>Add New</a></div>

Edit button html:

I saw that the bug you referenced got closed, but it isn't clear to me how to access an internal build. It also doesn't look like that would fix this problem.

The relivent part of my _layout.cshtml file is:

var kendoVersion = "2017.1.223";

}

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>@ViewData["Title"]</title>

<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>

<script src="//kendo.cdn.telerik.com/@(kendoVersion)/js/jquery.min.js"></script>

<script src="//kendo.cdn.telerik.com/@(kendoVersion)/js/kendo.all.min.js"></script>

<script src="//kendo.cdn.telerik.com/@(kendoVersion)/js/kendo.aspnetmvc.min.js"></script>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />

kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-bootstrap.min.css

@*Kendo*@

<link rel="stylesheet" href="//kendo.cdn.telerik.com/@(kendoVersion)/styles/kendo.common-bootstrap.min.css" />

<link rel="stylesheet" href="//kendo.cdn.telerik.com/@(kendoVersion)/styles/kendo.bootstrap.min.css" />

<link rel="stylesheet" href="//kendo.cdn.telerik.com/@(kendoVersion)/styles/kendo.bootstrap.mobile.min.css" />

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />

@Styles.Render("~/Content/css")

@RenderSection("head", required: false)

</head>

A grid example is:

<div class="k-widget k-grid k-editable" id="instructor-grid" data-role="grid">

</div>

<table role="grid">

<colgroup>

<col style="width:100px">

<col>

<col style="width:100px">

</colgroup>

<thead class="k-grid-header" role="rowgroup">

<tr role="row">

<th class="k-header k-filterable k-with-icon" scope="col" data-role="columnsorter" data-title="Instructor Id" data-index="0" data-field="InstructorId"><a tabindex="-1" class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Instructor/Instructor_Read?instructor-grid-sort=InstructorId-asc">Instructor Id</a>

</th>

<th class="k-header k-filterable k-with-icon" scope="col" data-role="columnsorter" data-title="Computing Id" data-index="1" data-field="ComputingId"><a tabindex="-1" class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Instructor/Instructor_Read?instructor-grid-sort=ComputingId-asc">Computing Id</a>

</th>

<th class="k-header k-filterable k-with-icon" aria-sort="ascending" scope="col" data-role="columnsorter" data-title="Name" data-index="2" data-field="Name" data-dir="asc"><a tabindex="-1" class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Instructor/Instructor_Read?instructor-grid-sort=Name-desc">Name<span class="k-icon k-i-arrow-n"></span><span class="k-icon k-i-sort-asc-sm"></span></a>

</th>

<th class="k-header k-filterable k-with-icon" scope="col" data-role="columnsorter" data-title="Banks" data-index="3" data-field="Banks"><a tabindex="-1" class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Instructor/Instructor_Read?instructor-grid-sort=Banks-asc">Banks</a>

</th>

<th class="k-header k-filterable k-with-icon" scope="col" data-role="columnsorter" data-title="Historical Banked Hours" data-index="4" data-field="HistoricalBankedHours"><a tabindex="-1" class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Instructor/Instructor_Read?instructor-grid-sort=HistoricalBankedHours-asc">Historical Banked Hours</a>

</th>

<th class="k-header k-filterable k-with-icon" scope="col" data-role="columnsorter" data-title="Banking Comments" data-index="5" data-field="BankingComments"><a tabindex="-1" class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Instructor/Instructor_Read?instructor-grid-sort=BankingComments-asc">Banking Comments</a>

</th>

<th class="k-header k-filterable k-with-icon" scope="col" data-role="columnsorter" data-title="Admin Comments" data-index="6" data-field="AdminComments"><a tabindex="-1" class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Instructor/Instructor_Read?instructor-grid-sort=AdminComments-asc">Admin Comments</a>

</th>

<th class="k-header" scope="col" data-index="7"><span class="k-link"> </span>

</th>

</tr>

</thead>

<tbody role="rowgroup">

<tr role="row" data-uid="4465fc9f-cdbb-4050-9802-48cce7703a8c">

<td role="gridcell">2300901</td>

<td role="gridcell">inst1</td>

<td role="gridcell">

<instructortip data-id="2300901" data-sort="A. Ryan">inst1</instructortip>

</td>

<td role="gridcell">No</td>

<td role="gridcell">0</td>

<td role="gridcell">-</td>

<td role="gridcell">null</td>

<td role="gridcell"><a class="k-button k-button-icontext k-grid-edit" role="button" href="#"><span class="k-icon k-i-edit"></span>Edit</a><a class="k-button k-button-icontext k-grid-delete" role="button" href="#"><span class="k-icon k-i-close"></span>Delete</a>

</td>

</tr>

<tr class="k-alt" role="row" data-uid="23a51c5c-5760-48d3-b58e-bc113e04a9e5">

<td role="gridcell">1174363</td>

<td role="gridcell">inst2</td>

<td role="gridcell">

<instructortip data-id="1174363" data-sort="inst2">inst2</instructortip>

</td>

<td role="gridcell">No</td>

<td role="gridcell">4</td>

<td role="gridcell">-</td>

<td role="gridcell">null</td>

</td>

</tr>

</tbody>

</table>

<div class="k-pager-wrap k-grid-pager k-widget k-floatwrap" data-role="pager"><a tabindex="-1" title="Go to the first page" class="k-link k-pager-nav k-state-disabled k-pager-first" href="#" data-page="1"><span class="k-icon k-i-seek-w">seek-w</span></a><a tabindex="-1" title="Go to the previous page" class="k-link k-pager-nav k-state-disabled"

href="#" data-page="1"><span class="k-icon k-i-arrow-w">arrow-w</span></a>

<ul class="k-pager-numbers k-reset">

<li class="k-current-page"><span class="k-link k-pager-nav">1</span>

</li>

<li><span class="k-state-selected">1</span>

</li>

<li><a tabindex="-1" class="k-link" href="#" data-page="2">2</a>

</li>

<li><a tabindex="-1" class="k-link" href="#" data-page="3">3</a>

</li>

<li><a tabindex="-1" class="k-link" href="#" data-page="4">4</a>

</li>

<li><a tabindex="-1" class="k-link" href="#" data-page="5">5</a>

</li>

<li><a tabindex="-1" class="k-link" href="#" data-page="6">6</a>

</li>

<li><a tabindex="-1" class="k-link" href="#" data-page="7">7</a>

</li>

<li><a tabindex="-1" class="k-link" href="#" data-page="8">8</a>

</li>

</ul><a tabindex="-1" title="Go to the next page" class="k-link k-pager-nav" href="#" data-page="2"><span class="k-icon k-i-arrow-e">arrow-e</span></a>

<a tabindex="-1" title="Go to the last page" class="k-link k-pager-nav k-pager-last" href="#" data-page="8"><span class="k-icon k-i-seek-e">seek-e</span>

</a><span class="k-pager-sizes k-label"><span tabindex="0" title="" class="k-widget k-dropdown k-header" role="listbox" aria-busy="false" aria-disabled="false" aria-expanded="false" aria-haspopup="true" aria-activedescendant="72188b6c-4d49-45ff-94b7-cecdbc3c0a19" aria-owns="" unselectable="on"><span class="k-dropdown-wrap k-state-default" unselectable="on"><span class="k-input" unselectable="on">50</span>

<span

class="k-select" aria-label="select" unselectable="on"><span class="k-icon k-i-arrow-60-down"></span></span>

</span>

<select style="display: none;" data-role="dropdownlist">

<option value="5">5</option>

<option value="10">10</option>

<option value="25">25</option>

<option selected="selected" value="50">50</option>

<option value="100">100</option>

</select>

</span>items per page</span><a title="Refresh" class="k-pager-refresh k-link" href="/Instructor/Instructor_Read"><span class="k-icon k-i-refresh">Refresh</span></a><span class="k-pager-info k-label">1 - 50 of 353 items</span>

</div>

generated js:

<script>

jQuery(function() {

jQuery("#instructor-grid").kendoGrid({

"edit": SetNameEnabled,

"columns": [{

"title": "Instructor Id",

"headerAttributes": {

"data-field": "InstructorId",

"data-title": "Instructor Id"

},

"width": "100px",

"field": "InstructorId",

"encoded": true,

"editor": "\r\n\r\n\u003cinput class=\"form-control\" id=\"InstructorId\" name=\"InstructorId\" style=\"width:100%\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"InstructorId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"

}, {

"title": "Computing Id",

"headerAttributes": {

"data-field": "ComputingId",

"data-title": "Computing Id"

},

"width": "100px",

"field": "ComputingId",

"encoded": true

}, {

"title": "Name",

"headerAttributes": {

"data-field": "Name",

"data-title": "Name"

},

"template": "#=InstructorNameWithTooltip#",

"encoded": false,

"field": "Name",

"editor": "\r\n\r\n\u003cinput class=\"form-control\" id=\"Name\" name=\"Name\" style=\"width:100%\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Name\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"

}, {

"title": "Banks",

"headerAttributes": {

"data-field": "Banks",

"data-title": "Banks"

},

"template": "#=BanksText#",

"field": "Banks",

"encoded": true,

"editor": "\r\n\u003cinput data-val=\"true\" data-val-required=\"The Banks field is required.\" id=\"Banks\" name=\"Banks\" type=\"checkbox\" value=\"true\" /\u003e\u003cinput name=\"Banks\" type=\"hidden\" value=\"false\" /\u003e\r\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Banks\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"

}, {

"title": "Historical Banked Hours",

"headerAttributes": {

"data-field": "HistoricalBankedHours",

"data-title": "Historical Banked Hours"

},

"field": "HistoricalBankedHours",

"encoded": true,

"editor": "\r\n\r\n\u003cinput data-val=\"true\" data-val-number=\"The field HistoricalBankedHours must be a number.\" id=\"HistoricalBankedHours\" max=\"2147483647\" min=\"-2147483648\" name=\"HistoricalBankedHours\" style=\"width:100%\" type=\"text\" /\u003e\u003cscript\u003e\r\n\tjQuery(function(){jQuery(\"#HistoricalBankedHours\").kendoNumericTextBox({\"decimals\":2});});\r\n\u003c/script\u003e\r\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"HistoricalBankedHours\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"

}, {

"title": "Banking Comments",

"headerAttributes": {

"data-field": "BankingComments",

"data-title": "Banking Comments"

},

"template": "#=BankingCommentsText#",

"encoded": false,

"field": "BankingComments",

"editor": "\r\n\r\n\u003cinput class=\"form-control\" id=\"BankingComments\" name=\"BankingComments\" style=\"width:100%\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"BankingComments\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"

}, {

"title": "Admin Comments",

"headerAttributes": {

"data-field": "AdminComments",

"data-title": "Admin Comments"

},

"template": "#=AdminComments#",

"encoded": false,

"field": "AdminComments",

"editor": "\r\n\r\n\u003cinput class=\"form-control\" id=\"AdminComments\" name=\"AdminComments\" style=\"width:100%\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"AdminComments\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"

}, {

"width": "100px",

"command": [{

"name": "edit",

"buttonType": "ImageAndText",

"text": "Edit"

}, {

"name": "destroy",

"buttonType": "ImageAndText",

"text": "Delete"

}]

}],

"pageable": {

"refresh": true,

"pageSizes": [5, 10, 25, 50, 100],

"buttonCount": 10,

"messages": {

"empty": "There are no records to show. Click the Add button to create a row"

}

},

"sortable": true,

"filterable": {

"extra": false,

"operators": {

"string": {

"contains": "Contains:"

},

"number": {

"gte": "Greater than or equal to:",

"lte": "Less than or equal to:"

},

"date": {

"gte": "Greater than or equal to:",

"lte": "Less than or equal to:"

},

"enums": {

"eq": "Equal to:",

"neq": "Not equal to:"

}

},

"scrollable": false,

"editable": {

"confirmation": "Are you sure you want to delete this record?",

"confirmDelete": "Delete",

"cancelDelete": "Cancel",

"mode": "inline",

"create": true,

"update": true,

"destroy": true

},

"toolbar": {

"command": [{

"name": null,

"buttonType": "ImageAndText",

"text": "Add New"

}]

},

"messages": {

"noRecords": "No records available."

},

"dataSource": {

"type": (function() {

if (kendo.data.transports['aspnetmvc-ajax']) {

return 'aspnetmvc-ajax';

} else {

throw new Error('The kendo.aspnetmvc.min.js script is not included.');

}

})(),

"transport": {

"read": {

"url": "/Instructor/Instructor_Read"

},

"prefix": "",

"update": {

"url": "/Instructor/Instructor_Update"

},

"create": {

"url": "/Instructor/Instructor_Create"

},

"destroy": {

"url": "/Instructor/Instructor_Destroy"

}

},

"pageSize": 50,

"page": 1,

"total": 0,

"serverPaging": true,

"serverSorting": true,

"serverFiltering": true,

"serverGrouping": true,

"serverAggregates": true,

"sort": [{

"field": "Name",

"dir": "asc"

}],

"filter": [],

"error": function(e) {

error_handler(e, 'instructor-grid');

},

"schema": {

"data": "Data",

"total": "Total",

"errors": "Errors",

"model": {

"id": "InstructorId",

"fields": {

"InstructorId": {

"type": "string"

},

"ComputingId": {

"editable": false,

"type": "string"

},

"NotInSISId": {

"type": "string"

},

"Name": {

"type": "string"

},

"Active": {

"type": "boolean"

},

"Banks": {

"type": "boolean"

},

"HistoricalBankedHours": {

"type": "number",

"defaultValue": null

},

"BankingComments": {

"type": "string"

},

"AdminComments": {

"type": "string"

},

"InSIS": {

"type": "boolean"

},

"InstructorType": {

"type": "string"

},

"CurrentNegotationStatus": {

"type": "string"

},

"HasCurrentNegotation": {

"editable": false,

"type": "boolean"

},

"BankingCommentsText": {

"editable": false,

"type": "string"

},

"AdminCommentsText": {

"editable": false,

"type": "string"

},

"ActiveText": {

"editable": false,

"type": "string"

},

"BanksText": {

"editable": false,

"type": "string"

},

"InstructorNameWithTooltip": {

"editable": false,

"type": "string"

}

});

</script>

Thanks,

Logan

answered on 22 Jun 2020, 02:21 PM

content.png

kendo-folder.png

fonts.png

default-folder.png

@Alex

I have added local copies of css and js files of Kendo, and added the required fonts, Default and textures files. But still the icons are not showing up.

Attached some screenshots of the local kendo folder set up.

Any leads will be appreciated.

Thanks.