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

Why many Web Font Icon showed black triangle?

3 Answers 365 Views
Button
This is a migrated thread and some comments may be shown as answers.
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
Daochuen asked on 06 Mar 2019, 05:15 AM

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
)

3 Answers, 1 is accepted

Sort by
0
Teya
Telerik team
answered on 07 Mar 2019, 01:03 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 08 Mar 2019, 05:57 AM
Thanks for respond my post Teya. I attached image and code here. Do you thing that related browser? We used IE 11.
0
Teya
Telerik team
answered on 08 Mar 2019, 02:34 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Button
Asked by
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Teya
Telerik team
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or