title: JSTree font awesome check Box
body: <p>I have a tree structure using jsTree, like this:</p>
  
  <pre><code>&lt;div id="SampleContainer"&gt;
  &lt;ul&gt; 
    &lt;li&gt;
      Top 1
      &lt;ul&gt;
        &lt;li&gt;
          Sub 1
          &lt;ul&gt;
            &lt;li&gt;
              A
            &lt;/li&gt;
            &lt;li&gt;
              B
            &lt;/li&gt;
  
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
          Sub 2
          &lt;ul&gt;
            &lt;li&gt;
              A
            &lt;/li&gt;
            &lt;li&gt;
              B
            &lt;/li&gt;
  
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to put icons of font-awesome for the check-box:</p>
  
  <p>I tried by doing this:</p>
  
  <pre><code>$(document).ready(function(){
     $("#SampleContainer").jstree({
      "plugins": ["checkbox"],
      core: {
        "themes": {
          "icons": false,
          "responsive": true
        }
      }
    });
      $('#SampleContainer').on('ready.jstree click', function (e, data) {     
          $('a &gt; i.jstree-checkbox').removeClass('jstree-icon jstree-checkbox').addClass('fa fa-square-o');
  
      $('a &gt; i.jstree-clicked').removeClass('jstree-icon jstree-checkbox').addClass('fa fa-check-square');
        });     
         });
  </code></pre>
  
  <p>and this icon 'fa fa-square-o' is coming. not able see the onclick 'fa fa-check-square'.!</p>
  
  <p>sample Design: 
  <a href="https://i.stack.imgur.com/vqBD5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vqBD5.png" alt="enter image description here"></a></p>
  
  <p>Developed Screen:
  <a href="https://i.stack.imgur.com/1FSWn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1FSWn.png" alt="enter image description here"></a></p>
  
  <p>Does anyone have an idea about this issue?</p>