Custom icons in jsTree 3?

Question

I have tryed to add custom icons to nodes with 'types' plugin but it doesn't work or through 'icon' field but then I can not change the background-size from 'auto' value. Could anyone help me, please.

$("#jstree")
        .on("ready.jstree", function (e, data) {
            $('div#jstree li > a[rel="disabled"] i.jstree-checkbox').remove();
        })
        .on("open_node.jstree", function (e, data) {
            $('div#jstree li > a[rel="disabled"] i.jstree-checkbox').remove();
        })
        .jstree({
        "core": {
            "data": { "url": "/Home/TreeData" }
        },
        "types": {
            "boss": {
                "icon": "/Content/jsTree/boss.png"
            }
        },
        "plugins": ['checkbox', 'theme', "html_data"]
    });

json:

[{"id":null,
  "text":"Root",
  "icon":"/Content/jsTree/boss.png",
  "state":null,
  "children":
    [{"id":null,
      "text":"Leaf A",
      "icon":null,
      "state":null,
      "children":null,
      "li_attr":{"rel":"boss"},
      "a_attr":null},
     {"id":null,
      "text":"Leaf B",
      "icon":null,
      "state":null,
      "children":null,
      "li_attr":null,
      "a_attr":{"rel":"boss"}},
     {"id":null,
      "text":"Leaf C",
      "icon":null,
      "state":null,
      "children":null,
      "li_attr":null,
      "a_attr":{"rel":"disabled"}
     }],
  "li_attr":null,
  "a_attr":null
}]

Answer 1

You need to add the 'types' plugin in the list of plugins:

"plugins": ['checkbox', 'theme', "html_data", "types"]

You also need to supply a type property in the node's data (instead of using li_attr):

[{"id":null,
  "text":"Root",
  "icon":"/Content/jsTree/boss.png",
  "state":null,
  "type":"boss"
  ...