Use FontAwesome Icons in the TreeView
Environment
| Product | Progress® Kendo UI® TreeView for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I use FontAwesome icons in the Kendo UI for jQuery TreeView?
Solution
The following example demonstrates how to use FontAwesome icons as TreeView sprite icons.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.fa.k-sprite,
.fa.k-sprite::before {
font-size: 12px;
line-height: 12px;
vertical-align: middle;
}
</style>
<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
dataSource: [
{ text: "Flying objects", spriteCssClass: "fa fa-sitemap", expanded: true, items: [
{ text: "Paper plane", spriteCssClass: "fa fa-paper-plane" },
{ text: "Plane", spriteCssClass: "fa fa-plane" },
{ text: "Space shuttle", spriteCssClass: "fa fa-space-shuttle" }
] }
]
});
</script>