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

Question

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 1

You just have to include this in the CSS:

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

​

This is a fiddle working correctly (updated 2016):