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('#', ''));
        }).jstree({
            'plugins' : ['html_data','themes','ui','types'],
            'ui' : {
                'select_limit' : 1
            },
            'core' : {
                'animation' : 0
            },
            'types': {
                'default' : {
                    'icon' : {
                        'image' : '/admin/views/images/file.png'
                    }
                }
            }
        });

I have a basic unordered list I would like to have displayed as a list of files. I'm trying to use the "types" to change the icon but I can't for the life of me figure out how to do it. I checked their docs link and even when using almost identical code nothing seems to happen.

From my understanding of the code above the default type of my tree should have the icon I specified but nothing happens, all I get is the default folder icon.

Any ideas? Sorry if the question seems basic but I find the documentation hard to follow when trying to do basic things. :)

Answer 1

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 2

I was able to replace several icons using the following CSS, without using the Types plugin. Hopefully this helps someone else as well!

    /* replace folder icons with another image, remove leaf image */        
    li.jstree-open > a .jstree-icon {background:url("imageOpen.gif") 0px 0px no-repeat !important;}
    li.jstree-closed > a .jstree-icon {background:url("imageClosed.gif") 0px 0px no-repeat !important;}
    li.jstree-leaf > a .jstree-icon { display: none; }


    /* replace checkbox icons */
    li.jstree-unchecked > a .jstree-checkbox, li.jstree-undetermined > a .jstree-checkbox 
    {
        background:url("uncheckedImage.png") 0px 0px no-repeat !important;
        width: 32px;
        height: 29px;
        padding-top: 5px;
    }
    li.jstree-checked > a .jstree-checkbox
    {
        background:url("checkedImage.png") 0px 0px no-repeat !important;
        width: 32px;
        height: 29px;
        padding-top: 5px;
    }