When using a custom optionLabelTemplate and valueTemplate with Font Awesome dual tone icons it seems we need to set the display css class to inline-flex to keep the icon from separating (Kendo UI v2020.3.1021 in Chrome v88.0.4324.104).
$("#dropDownList").kendoDropDownList({ optionLabel: "Select One" , template: "<i class=\"#=icon# mr-1\" style=\"font-size: 25px\"></i>#=name#" , optionLabelTemplate: "<i class=\"fad fa-hard-hat mr-1\" style=\"display: inline-flex\"></i>Select One" , valueTemplate: "<i class=\"#=icon# mr-1\" style=\"display: inline-flex\"></i>#=name#" ...});3 Answers, 1 is accepted
Hi,
Here is a sample that demonstrates how to use font icons in Kendo DropDownlist template, optionLabelTemplate and valueTemplate:
https://dojo.telerik.com/adibomiC/12
You may also find the following article on the matter useful: https://docs.telerik.com/kendo-ui/knowledge-base/dropdownlist-icon-placeholder
I hope this helps.
Best Regards,
Misho
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Veteran
Hi,
Thanks for your follow up about the font awesome duotone icons styling.
We appreciate your feedback.
Best Regards,
Misho
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.