Edit this page

Use FontAwesome Icons

The following example demonstrates how to use FontAwesome icons as TreeView sprite icons.

Example
    <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>

See Also

For more runnable examples on the Kendo UI TreeView, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy