Last Updated: February 25, 2016
·
2.397K
· aswinramakrish

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

2 Responses
Add your response

I am exactly looking for this. I am using extjs5 , so the updated code i tried is this.

Ext.Function.interceptAfter(Ext.tree.Panel.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.Function.interceptAfter(Ext.tree.Panel.prototype, 'setIconCls', function(cls) {
    $($(this)[0].ui.elNode).find('i').removeClass().addClass(cls);
});

======================

I have included this piece of code in Application.js init() funtion.

I am unable to get this working. when i inspect the element, i dont see the dom elements being changed.
could you please explain how i can use this with extjs 5 ?

over 1 year ago ·

Can you create a fiddle, so I have a better idea?

over 1 year ago ·