How can I replace the icons in a dijit Tree with font-awesome icons?

Question

I'm trying to switch out the icons in a dijit tree (specifically those that correspond with dijitFolderClosed, dijitFolderOpened - classes that apply to parent nodes in the tree) with font-awesome 'icons'. Switching out what icons are displayed is easy when the icons are actually image files - I can just change what class is returned by getIconClass().

However, font-awesome seems to work through inserting pseudoelements, and I'm having trouble getting this to work with dijit. The icon nodes are img elements, and while some approach like this looks promising, but doesn't work on img tags because they don't have content attributes.

What are some good options for getting font-awesome to work as dijit tree icons? It looks possible to mess with the img tags as the answers here suggest, or I could use replaceChild() to replace the img icon elements with elements that font-awesome can apply to. Can anyone think of better solutions?

score 3 · Accepted Answer · edited May 23 '17 at 11:58

You need to override your dijit styles: set background-image: none on .dijitIcon* and display:none on .dijit*Inner classes, then put FontAwesome content in before pseudo classes.

I've done this using Sass on many dijits, here is an example for dijit/form/ComboBox. The key bits are:

     .dijitDownArrowButton {
         &:before {
             font-family:'FontAwesome';
             content: '\f0d7';
         }
         .dijitArrowButtonContainer {
             background-image: none;
         }
         .dijitArrowButtonInner {
             display: none;
         }
    }

This post explains overriding dijit classes well. And dijit theme overriding tutorial is here.

How can I replace the icons in a dijit Tree with font-awesome icons?

1 Answers1