How To Use FontAwesome Icons In jsTree Using ASP.NET MVC And JavaScript

Hello,

Here's a tutorial on how to integrate FontAwesome Icons In jsTree Using ASP.NET MVC And JavaScript. First is to install the FontAwesome Nuget package using package console manager. Make sure to target the web project.

Install-Package FontAwesome

Then we add custom css styles for the icon color that corresponds to a file type.

/* icon implementation */
.pdf-icon-color {
   color: red !important;
}

.word-icon-color {
   color: blue !important;
}

.xls-icon-color {
   color: green !important;
}

.ppt-icon-color {
   color: orange !important;
}

.img-icon-color {
   color: DodgerBlue !important;
}

.txt-icon-color {
   color: gray !important;
}

.video-icon-color {
   color: royalblue !important;
}

.default-icon-color {
   color: black !important;
}

Once we have the css styles in place, we then proceed with the essential JavaScript functions. The functions below will update the jsTree icons based on their types. The default icon will be set as a folder if no file type is detected.

function UpdateFileIcon(node) {
   let tree = $('#tree').jstree(true);
   if (!node) {
      let nodes = tree.get_json('#', { flat: true });
      if (nodes.length > 0) {
         $.each(nodes, function (index, node) {
            if (node.text.indexOf('.') !== -1) {
               let icon = 'jstree-file ' + getFileIcon(node.text);
               tree.set_icon(node.id, icon);
            }
         });
      }
   }
   else {
      if (node.text.indexOf('.') !== -1) {
         let icon = 'jstree-file ' + getFileIcon(node.text);
         tree.set_icon(node.id, icon);
      }
   }   
}

function getFileIcon(fileName) {

   let extension = fileName.split('.').pop().toLowerCase();
   switch (extension) {

      case 'pdf':
         return 'fa fa-file-pdf-o';

      case 'doc':
      case 'docx':
         return 'fa fa-file-word-o';

      case 'xls':
      case 'xlsx':
      case 'csv':
         return 'fa fa-file-excel-o';

      case 'ppt':
      case 'pptx':
         return 'fa fa-file-powerpoint-o';

      case 'jpg':
      case 'jpeg':
      case 'png':
      case 'gif':
      case 'svg':
         return 'fa fa-file-image-o';

      case 'zip':
      case 'rar':
      case '7z':
         return 'fa fa-file-archive-o';

      case 'txt':
      case 'md':
         return 'fa fa-file-text-o';

      case 'mp4':
      case 'mpeg':
      case 'mp3':
         return 'fa fa-file-video-o';

      default:
         return 'fa fa-file-o';
   }
}

The AssignFileIconColor function will set the icon with the css class name that correspond to the css declarations from the predefined styles above.

function AssignFileIconColor(nodeId) {
   let instance = $('#tree').jstree(true);
   let node = instance.get_node(nodeId);
   
   // Skip the root wrapper initialization check
   if (nodeId !== '#') {
      // Check if the node is a folder or a file
      let isFolder = (node.children && node.children.length > 0) || node.type === 'default';
      if (!isFolder) {

         if (node.icon.indexOf("fa-file-pdf-o") !== -1) {
            node.icon = node.icon + " pdf-icon-color";
         }
         else if (node.icon.indexOf("fa-file-word-o") !== -1) {
            node.icon = node.icon + " word-icon-color";
         }
         else if (node.icon.indexOf("fa-file-excel-o") !== -1) {
            node.icon = node.icon + " xls-icon-color";
         }
         else if (node.icon.indexOf("fa-file-powerpoint-o") !== -1) {
            node.icon = node.icon + " ppt-icon-color";
         }
         else if (node.icon.indexOf("fa-file-image-o") !== -1) {
            node.icon = node.icon + " img-icon-color";
         }
         else if (node.icon.indexOf("fa-file-text-o") !== -1) {
            node.icon = node.icon + " txt-icon-color";
         }
         else if (node.icon.indexOf("fa-file-video-o") !== -1) {
            node.icon = node.icon + " video-icon-color";
         }
         else {
            node.icon = node.icon + " default-icon-color";
         }
      }
   }

   // Recursively loop through all children (works for both folders and sub-files)
   if (node.children && node.children.length > 0) {
      $.each(node.children, function (index, childId) {
         AssignFileIconColor(childId);
      });
   }
}

The RedrawTree function will either redraw the entire jsTree or a specific node so as not to refresh the entire page.

function RedrawTree(nodeId) {
   let tree = $('#tree').jstree(true);
   if (!nodeId) {
      tree.redraw(true);
   }
   else {
      tree.redraw_node(nodeId, true);
   }
}

If a page loads and the tree is ready, you may call the UpdateFileIcon function first and then the AssignFileIconColor function.

 $tree.on("ready.jstree", function () {
    UpdateFileIcon();
    AssignFileIconColor('#');
 });

To redraw specific icon(s), you also need to call the RedrawTree function right after the AssignFileIconColor function.

 getNode.forEach(function (node) {
   UpdateFileIcon(node);
   AssignFileIconColor(node.id);
   RedrawTree(node.id);
});

Cheers!