This is a migrated thread and some comments may be shown as answers.
Grid k-icon not appearing when using local kendo.common.min.css file
3 Answers 358 Views
This is a migrated thread and some comments may be shown as answers.
Dean
Top achievements
Rank 1
Dean asked on 24 Oct 2017, 06:00 PM

I'm building a local WPF application that uses kendo grids. The application needs to work offline so I'm referencing the kendo css and js files in local directory within my application. Everything is working fine except the icons for filtering and paging aren't appearing within the grid. I've attached a small sample project to show my problem.

If you uncomment line 45 in MainWindow.xaml.cs to reference the remote copy of kendo.common.css everything works fine, but when referencing the local copy of that file, the images don't appear properly.

3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 26 Oct 2017, 02:13 PM
Hello, David,

Thank you very much for the provided runnable project.

The Kendo UI icons are now font icons and the font should be available as a resource so the icons can appear. I can see that the files are in the correct folder but I am unsure if the WPF application needs an additional configuration to serve the font locally or if it is a matter of the way that paths are declared in the kendo css files combined with the WPF environment.

I will need more time to tell you what exactly is the issue but it most likely has to do with the URL src path to the WebFontIcons font in the kendo.common.min.css:

@font-face {
  font-family: 'WebComponentsIcons';
  src: url('fonts/glyphs/WebComponentsIcons.eot?gedxeo');
  src: url('fonts/glyphs/WebComponentsIcons.eot?gedxeo#iefix') format('embedded-opentype'), url('fonts/glyphs/WebComponentsIcons.ttf?gedxeo') format('truetype'), url('fonts/glyphs/WebComponentsIcons.woff?gedxeo') format('woff'), url('fonts/glyphs/WebComponentsIcons.svg?gedxeo#WebComponentsIcons') format('svg');
  font-weight: normal;
  font-style: normal;
}

I suggest replacing the path with the local path in the CSS file and possibly removing the query part of the URL. I will get back to you when I have more information why you may be missing the font icons.

Let me know what you think.

Regards,
Alex Hajigeorgieva
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
Dean
Top achievements
Rank 1
answered on 30 Oct 2017, 03:57 PM
Thanks for the reply Alex. I tried updating the CSS file to point to the local path of the glyph files but that didn't fix the issue either.
0
Alex Hajigeorgieva
Telerik team
answered on 01 Nov 2017, 04:03 PM
Hello, David,

I am sorry to hear that the suggestion produced no results.

I am wondering if the reason lies with the WebBrowser component and its limitations to load custom fonts. Kendo UI Supports the browsers listed here:

https://docs.telerik.com/kendo-ui/intro/supporting/browser-support

Are you able to add another custom font to the page from the local files and use that in the application?

Look forward to hearing back from you.

Regards,
Alex Hajigeorgieva
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.
Tags
Grid
Asked by
Dean
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Dean
Top achievements
Rank 1
Share this question
or