Ext JS Hack to use Font Awesome as Icon Class

Recently, I did a simple hack to use the awesome Font Awesome library alongside Ext JS (3.4) seamlessly. The hack I did allows font awesome icons to be served as good Ext JS icons for Tree Panels.

The following is the code –

Ext.sequence(Ext.tree.TreeNode.prototype, 'render', function (treenode) {       
    $('.x-tree-node-icon').removeClass('x-tree-node-icon').replaceWith(function () {
        if (typeof($(this).attr('class')) != 'undefined')
            return '<i class="' + $(this).attr('class') + '"/>';
        else
            $(this).addClass('.x-tree-node-icon');
    });
});   

Ext.intercept(Ext.tree.TreeNode.prototype, 'setIconCls', function (cls) {              
    $($(this)[0].ui.elNode).find('i').removeClass().addClass(cls);
});

After including this javascript at the top level, you can use Font Awesome (3.4) icons by just referencing them in the iconCls. This hack can also be extended for button icons etc.

Here is the link to the github repository – https://github.com/aswinramakrish/ext-js_font-awesome