Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Node icon in a jsTree tree with font-awesome

I have a tree structure using jsTree, like this:

<div id="jstree">
        <ul>
           <li>Root 1
             <li> Child 1</li>  
           </li>   
        </ul>
</div>

I would like to put icons of font-awesome for the roots and children. Here is explained how to do it with bootstrap, below and example:

 <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>Child</li>

I tried by doing this:

<li data-jstree='{"icon":"fa fa-user fa-2x"}'>

and this is the error that the browser tells me:

Invalid character (:) in expression "icon":"fa fa-user fa-2x"

I should also mention that I am using XML and XSL.

Does anyone have an idea about this issue?

like image 226
Colet Avatar asked Jan 01 '14 10:01

Colet


People also ask

Can I add icons to Font Awesome?

Uploaded icons can use all of the official Font Awesome styling options, including sizing, coloring, rotating, power transforms, masking, and layering. You can also use your uploaded icons as pseudo-elements.

How do I display Font Awesome icons in HTML?

Add Icons to HTML We recommend using <i> element with the Font Awesome CSS classes for the style class for the style of icon you want to use and the icon name class with the fa- prefix for the icon you want to use. Accessibility-minded folks may want to opt for the <span> element instead of <i> .

How do I use Font Awesome icons in HTML 5?

To use the Free Font Awesome 5 icons, you can choose to download the Font Awesome library, or you can sign up for an account at Font Awesome, and get a code (called KIT CODE) to use when you add Font Awesome to your web page.


2 Answers

If you have <li data-jstree='{"icon":"fa fa-user fa-2x"}'> literally in XSLT code then I think you want <li data-jstree='{{"icon":"fa fa-user fa-2x"}}'> instead to prevent the XSLT engine from processing the attribute value as an attribute value template.

like image 106
Martin Honnen Avatar answered Oct 24 '22 08:10

Martin Honnen


You can use the following design:

<div id="jstree">
<ul>
  <li data-jstree='{"opened":true,"icon":"fa fa-folder-open"}'>Accounts
    <ul>
      <li data-jstree='{"icon":"fa fa-folder"}'>Account 1
      <ul>
        <li data-jstree='{"icon":"fa fa-file"}'>File 1</li> 
        <li data-jstree='{"icon":"fa fa-file"}'>File 2</li> 
      </ul>
      </li>
      <li data-jstree='{"icon":"fa fa-folder"}'>Account 2
      <ul>
        <li data-jstree='{"icon":"fa fa-file"}'>File 1</li> 
        <li data-jstree='{"icon":"fa fa-file"}'>File 2</li> 
      </ul>
      </li>
    </ul>
  </li>
</ul>
</div>

And you change how it looks once the folder is opened or closed:

// bind customize icon change function in jsTree open_node event. 
$('#jstree').on('open_node.jstree', function(e, data){
    var icon = $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first();
    icon.removeClass('fa-folder').addClass('fa-folder-open');
});

// bind customize icon change function in jsTree close_node event. 
$('#jstree').on('close_node.jstree', function(e, data){
    var icon = $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first();
    icon.removeClass('fa-folder-open').addClass('fa-folder');
});
like image 40
Tim Truston Avatar answered Oct 24 '22 08:10

Tim Truston