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. :)

FabioSorre · Answer 1 · 2014-03-10T15:39:25.133

25

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.

edited Mar 10 '14 at 15:39

answered Mar 10 '14 at 15:25

FabioSorre

310
3
11

I can verify that this is a correct and working solution. So if you will put a little png to your root `images` folder then you should use path like `
`

NoWar

Aug 26 '14 at 11:43

5

If someone need to add font awesome icon you can just write `

`

– Nenad Vracar Sep 26 '17 at 19:40

score 24 · Answer 2 · answered Aug 26 '11 at 19:16

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;
    }

Thanks for the answer. Though this would work it would also change the icons for all trees on my page. In my situation I had a tree that had nothing but folders and one with nothing but files so I wouldn't this change to be global. — Gazillion, Aug 26 '11 at 19:20
Any way to use stacked font-awesome icons in jstree as HTML or classnames (not as image)? Have you ever tried? — Jeya Suriya Muthumari, Mar 21 '19 at 06:10

score 17 · Answer 3 · edited Jul 21 '17 at 19:51

17

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

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

edited Jul 21 '17 at 19:51

Heretic Monkey

11,687
7
53
122

answered Jan 23 '15 at 12:37

Henrik

2,180
16
29

2

Well, this is the best solution for those using new jstree vesion. – Víctor Hugo May 25 '15 at 12:41
1

This is the best solution! – billybob Aug 22 '16 at 14:14
nodeId is the nodes ID.. (or jstree node reference object) for instance you can do: `var nodeId = $(#tree).jstree(true).get_node("node_name");` – Henrik Aug 30 '16 at 10:12

score 17 · Accepted Answer · edited Sep 14 '11 at 20:41

Two problems:

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

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.

What are the js files you had to import for ui & types plugin ? was the basic jstree.js file enough ? — kaustav datta, Oct 08 '13 at 16:53

score 10 · Answer 5 · edited Dec 24 '12 at 19:01

10

To hide the folder icon use the following:

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

edited Dec 24 '12 at 19:01

A--C

36,351
10
106
92

answered Dec 24 '12 at 18:42

Mike

101
1
2

score 5 · Answer 6 · answered Aug 22 '14 at 17:40

5

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

answered Aug 22 '14 at 17:40

Severian

325
3
7

score 3 · Answer 7 · edited Oct 22 '14 at 14:00

The way to change icon based on the level:

jQuery('#tree-edit').on('changed.jstree', function(e, data) {

      //do something
    }).on("open_node.jstree", function(event, data) {
        jQuery.each(data.instance._model.data, function(key, val) {
            console.log(key + ", " + val);
           if (key.length < 4 || key=='#') {
               jQuery.jstree.reference("#tree-edit").set_type(val, "selectable");
           }
        });
    }).on("loaded_node.jstree", function(event, data) {
        console.log(data);

    }).jstree({
        'plugins': ["search", "types"],
        'core': {
            'data': {
                'url': 'http://www.google.com/json',
                'data': function(node) {
                    return {'id': node.id};
                }
            }
        },
        'types': {
            'selectable': {
                'icon': 'http://elpidio.tools4software.com/images/icon-ok-small.png'
            },
            'default': {
                'icon': 'http://www.fabulatech.com/printer-for-remote-desktop-server-help/img/icons/warning-small.gif'
            }
        },
    });

score 2 · Answer 8 · answered Sep 09 '16 at 14:05

After trying so many configurations unsuccessfully, I found a great idea!

By using online photo editor https://pixlr.com/editor/ I have opened icon image file under the path:

jstree\themes\default\32px.png

And I opened the folder icon I want to replace

Replace it easily and save :) I think it is the best after 2 hour struggle.

Saeed Ghareh Daghi · Answer 9 · 2016-08-09T09:27:26.413

0

try this code:

lst_item = [];
$('#city_tree li').each(function(){ lst_item.push($(this).attr('id')); });
$('#city_tree').jstree(true).set_icon(lst_item, "/static/global/plugins/jstree/province.png");

edited Aug 09 '16 at 09:27

answered Aug 09 '16 at 09:16

Saeed Ghareh Daghi

1,164
1
13
21

score 0 · Answer 10 · edited Jul 14 '17 at 18:29

0

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');
    });

edited Jul 14 '17 at 18:29

Jocelyn

11,209
10
43
60

answered Aug 24 '16 at 14:38

user6753106

1

How to change icon in jstree?

10 Answers10

Linked