Font Awesome icons for Webix tree nodes

Question

Webix integrates with Font Awesome. But how can Font Awesome icons be used instead of the default folder/file icons in trees to style individual nodes?

Here's what I've tried:

http://webix.com/snippet/52251623

• template only works at the tree level
• $css keeps the existing folder/file icon
• there is no icon property documented for trees, yet setting one does something... it changes the folder icon into a file one, when the node has children.

Answer 1

For single tree it will be like next

webix.ui({
  view:"tree",
  type:{
    folder:function(obj){
      if (obj.$count)
        return "<span class='webix_icon fa-folder'></span>";
      return  "<span class='webix_icon fa-file'></span>";
    }
  },
  data:tree_data
})

You can check the sample here - http://webix.com/snippet/0f3d85c3

If you want to share this behavior among multiple tree controls, you can define the custom type once

webix.type(webix.ui.tree, {
  name:"awesome",
  folder:function(obj){
      if (obj.$count)
        return "<span class='webix_icon fa-folder'></span>";
      return  "<span class='webix_icon fa-file'></span>";
    }
});

and later use type:"awesome" to apply the styling

webix.ui({
  view:"tree",
  type:"awesome",
  data:tree_data
})

Example - http://webix.com/snippet/79dbe741