Font Awesome Icons for Webix Tree Nodes

Question

Webix integrates with the Awesome font . But how to use the awesome font icons instead of the default folder / file icons in the trees to style individual nodes?

Here is what I tried:

http://webix.com/snippet/52251623

• template only works at tree level
• $css stores the icon of an existing folder / file
• there is no iconproperty documented for trees , but the installation does something ... it changes the folder icon to file alone when the node has children.

Answer 1

For a single tree, it will look like the following

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
})

- http://webix.com/snippet/0f3d85c3

,

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>";
    }
});

: "awesome"

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

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