Font Awesome icons for Webix tree nodes when select = true

Question

This is a follow up question to this post: Font Awesome icons for Webix tree nodes

The above solution does not work well when "select: true" for the tree. Try it out in the demo here to see what I mean: http://webix.com/snippet/4e85a0ef.

@Aquatic, Could you please update the code with an example so that the Font Awesome icons can replace the 'standard' folder icon AND it works and looks as good as the standard icon in all cases, including when select = true for the tree?

score 0 · Answer 1 · answered Jan 14 '16 at 15:23

Default styling has some rules for spans, which causes the issue. Just use a different tag for icon hosting. Like follows

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

and

<style>
  i.webix_icon{
    color: #777;
    line-height:27px;
  }
</style>

http://webix.com/snippet/9a187ca6

Font Awesome icons for Webix tree nodes when select = true

1 Answers1