Replace panel tool by awesome font icon

Question

It is possible to replace a panel tool by an awesome font icon.

I made several attempts with CSS but it does not work.

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2a0i

Answer 1

You are on the right track, but the issue is that ExtJS 5 uses the img tag for tool elements, and there's a "minor" issue with :before pseudo elements for img tags. You will have to work around that by appending the original Ext.panel.Tool to use a span instead whenever you need that:

Ext.define('',{
    override: 'Ext.panel.Tool',
    renderTpl: [
        '<tpl if="ui==\'glyph\'">',
            '<span id="{id}-toolEl" data-ref="toolEl" src="{blank}" class="{baseCls}-img {baseCls}-{type}' +
                '{childElCls}" role="presentation"/>',
        '<tpl else>',
            '<img id="{id}-toolEl" data-ref="toolEl" src="{blank}" class="{baseCls}-img {baseCls}-{type}' +
                '{childElCls}" role="presentation"/>',
        '</tpl>'
    ]
});

Then you can tell some tools to use ui:"glyph", which is used in the override to detect that a div should be used, thus allowing :before pseudo elements and, therefore, a FontAwesome icon:

tools: [{
    type: 'edit',
    ui:"glyph",
    cls:'component-tool-edit',
    callback: function() {
        alert();
    }

and then the icon is technically displayed:

you only have to add FontAwesome to the project and amend your stylesheet:

@font-face {
    font-family: 'FontAwesome';
    src: url('font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 2

Override .x-panel-header-title-default .x-panel-header-default css class and add a background "awesome icon" image.

---

Edit:

It is difficult to visualize what you want but this should get you started.

.x-panel-header-default
{
    /*this should remove the gradient from the panel header try using a icon instead*/
    background-image: none !important; 
}