RTB RTB - 22 days ago 4
CSS Question

How to change the icon of a JStree node using only css?

I'm trying to find out how to change the icon of a JStree node using only css?
There are a lot of posts explaining on doing it with javascript but i prefer to use css only.

Here's my code so far:

$("#treeview").jstree().on('loaded.jstree', function()
{
$("#treeview").jstree('open_all');
});


And the Html:

<div id="treeview">
<ul>
<li>
<a href="#">abcdefghijkl</a>
<ul>
<li>
<a href="#" onclick="goTo('index.php?module=klimaat&amp;pagina=dashboard&amp;id=6',false);">
Beneden</a>
</li>
<li>
<a href="#" onclick="goTo('index.php?module=klimaat&amp;pagina=dashboard&amp;id=7',false);">
Boven</a>
</li>
</ul>
</li>
</ul>
</div>


For CSS i'm using the default style sheet delivered by jstree. The documentation provided by jstree is really crappy. So stackoverflow is a big help, but i couldn't find this one on the website.

If you need more code or information, please ask. Thanks

Answer

EDIT:

You just have to include this on the css:

a .jstree-icon
{
    background-image: url("yourimage.png")!important;
    background-position: 0!important;
}

‚Äč

Here is a fiddle which works correctly (updated in 2016):

https://jsfiddle.net/arWQR/62/

Comments