Why many Web Font Icon showed black triangle?

[Daochuen]

Hello,

I try to use some web font icons on my project buttons but found many of them showed as same black small triangle. for example 'k-i-search' displayed as expected. but 'k-i-folder-open' and many others always showed as black triangle. Could any one tell me how to resolve the issue?

Thanks.

 

@(Html.Kendo().Button()
    .Name("search")
    .Tag("span")
    .Content("Search")
    .Icon("k-icon k-i-search") <--Good
)

@(Html.Kendo().Button()
    .Name("open")
    .Tag("span")
    .Content("Open")
    .Icon("k-icon k-i-folder-open") <--showed black triangle
)

[Teya]

Hi Daochuen,

From the provided code snipped I assume that you are either using UI for ASP.NET MVC or ASP.NET Core. This is why I have moved the forum post to UI for ASP.NET MVC Forum > Button.

I tried reproducing the issue that you have described by creating a sample project and adding two buttons with a search icon and open folder icon (in the same way as you did in the code snippet) and it seems that at my end everything works as expected. I have attached here the sample MVC project, so can you please modify it in a way that the issue is replicable so that I can further investigate it and eventually find a fix?

I am looking forward to your reply.


Regards,
Teya
Progress Telerik

[Daochuen]

Thanks for respond my post Teya. I attached image and code here. Do you thing that related browser? We used IE 11.

[Teya]

Hi Daochuen,

Thank you for the attached zip. Judging from the screenshot, it looks like you are using a Kendo version older than Kendo UI 2017 R1 when the Web Font Icons were integrated into Kendo. Prior to that, the following sprite image was used for the icons: 

https://kendo.cdn.telerik.com/2016.3.1118/styles/Default/sprite.png 

As you can see, some of the icons that are currently present in the Web Fonts Icons list are missing from the image, which is why when you try to add them, you are seeing triangles.

If you would like to use the new icon classes I would suggest you upgrading to a newer version where the web font icons are supported. Generally speaking, keeping up-to-date with the newer Kendo versions provides new features, enhancements and bug fixes.

Alternatively, you can choose other icons from the sprite and use them instead, but I am not sure if you will be able to find appropriate ones. Another option is to download the needed icons as png-s and write custom CSS to reference them.


Regards,
Teya
Progress Telerik