Geek asks and answers

How to change JStree node icon using only css?

I'm trying to figure out how to change the JStree node icon using only css? There are many posts explaining this with javascript, but I prefer to use only css.

Here is my code:

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

And 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 use the default stylesheet provided by jstree. The documentation provided by jstree is really crappy. So stackoverflow is a big help, but I could not find it on the website.

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

+5
source share
1 answer

You just need to include this in CSS:

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

This is the fiddle working correctly (updated 2016):

+6
source

More articles:


All Articles