How to change icon in jstree?

Question

I have the following code:

$(\'.wpFolders.co_files\').bind(\'select_node.jstree\', function (event, data) {
            getFileById(data.args[0].hash.replace(\'#         


        

Answer 1

To hide the folder icon use the following:

<style type="text/css">
 .jstree li > a > .jstree-icon {  display:none !important; } 
</style>

Answer 2

The following script works for me:

$('div#jstree').on('ready.jstree click', function (e, data) {
        $('i.jstree-icon').removeClass('jstree-themeicon jstree-icon').addClass('fa fa-lg fa-user');
    });

Answer 3

After an headache... I found a solution.

    <li data-jstree='{"icon":"path/file.png"}'></li>

I suggest to don't modify the css code.

PS The "types" plug-in is not necessary.

Answer 4

Two problems:

1. I needed to add the "type" in my rel attribute of my list objects (I created a default and file type).

2. I forgot one level in my array declaring the types, the code had to be like the following:

   $('.wpFolders.co_files').bind('select_node.jstree', function (event, data) {
       getFileById(data.args[0].hash.replace('#', ''));
   }).jstree({
       'plugins' : ['html_data','themes','ui','types'],
       'ui' : {
           'select_limit' : 1
       },
       'core' : {
           'animation' : 0
       },
       'types': {
           'types' : {
               'file' : {
                   'icon' : {
                       'image' : '/admin/views/images/file.png'
                   }
               },
               'default' : {
                   'icon' : {
                       'image' : '/admin/views/images/file.png'
                   },
                   'valid_children' : 'default'
               }
           }
   
       }
   });
   

I don't really understand why my code is breaking in the WYSIWYG, sorry if it's ugly. Anyway, I hope this can help someone.

Answer 5

You may change the icon with the new API, without HTML, CSS, or plugins.

$("#tree").jstree(true).set_icon(nodeId, "/images/blabla.png");

Answer 6

jstree includes its own file icon (in addition to the default folder icon), add 'icon': 'jstree-file' property to node to show it