Changing arrow icon for empty parent nodes

[renewable]

Hello,

I wanted to make the arrow icon to expand a node bigger, as a client couldn't see it!

The following CSS kind of works, but has a couple of problems:

• The icon is the same for unclickable nodes with no children - and - clickable nodes with children. How do I differentiate between the two
• Some of the dots disappear

Does anyone have an idea how to fix either of these two problems?

Thank you,

Thomas

` <style type="text/css">

    .jstree-node .jstree-icon.jstree-ocl {
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Angle_right_font_awesome.svg/512px-Angle_right_font_awesome.svg.png');
        background-size: 22px 22px;
        background-position: center !important;
        background-repeat: no-repeat;
        transition: all 0.3s ease;
    }
    .jstree-node.jstree-open .jstree-icon.jstree-ocl {
        transform: rotate(90deg);
    }

</style>`