Search code examples
javascriptcssjstree

JSTree Proton theme Change icon to folder open and close

I just have one demo application in which JSTree with proton theme is used.

I want to change the icon when node is open to folder open and when node is closed to folder closed.

Same like following. Proton CMS ADMIN PANEL

Check the documentation node in there it changes icon to folder open and closed.

Now when i am trying to change icon i found that it is using CSS Sprites and when i checked style.css i found that it is also using base64 url to load some images.

enter image description here

here is the sprites it has used.

How can i use that directory open and close icon in node?

What are the names or css class to use for that icon?

when we are having sprite how we can find icon name and load it?

Apart from that i also want to use that filled square for leaf node icon.

I am able to render that image using following sprite code.

.jstree-folder-open {
background: url('32px.png') no-repeat -531px -23px !important;
}

But still unable to display icon in correct size and correct way. Is there any particular way?

Solution

  • Finally i was able to render image by just changing background position in css.

    Here is the tool by which i found the css code to render image from sprite.

    Sprite Cow

    Open your image and select portion.

    After that i just created seperate class and used background-position css.

    .jstree-folder-open {
background-image: url('32px.png') !important;
background-position: -105px -70px !important;
}

.jstree-folder-closed {
background-image: url('32px.png') !important;
background-position: -261px -7px !important;
}

li.jstree-leaf > a > i.jstree-icon {
background-image: url('32px.png') !important;
background-position: -200px -7px !important;
}