Custom icons in jsTree 3?

Question

I tried to add custom icons to nodes with type plugins, but this doesn’t work either through the “icon” field, but I cannot change the background size from “auto”. Can 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 plugin 'types' to the list of plugins:

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

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

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