用真棒字体图标替换面板工具

Question

可以用一个很棒的字体图标替换面板工具。

我用CSS做过几次尝试，但它不起作用。

小提琴：https://fiddle.sencha.com/#view/editor&fiddle/2a0i

Answer 1

您走在正确的轨道上，但问题是ExtJS 5使用工具元素的img标记和there's a "minor" issue with :before pseudo elements for img tags。您需要通过附加原始Ext.panel.Tool来解决此问题，以便在需要时使用span：

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>'
    ]
});

然后你可以告诉一些工具使用ui:"glyph"，它在覆盖中用来检测应该使用div，从而允许:before伪元素，因此，一个FontAwesome图标：< / p>

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

然后技术上显示图标：

您只需将FontAwesome添加到项目中并修改样式表：

@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

覆盖 .x-panel-header-title-default .x-panel-header-default css类并添加背景“awesome icon”图像。

编辑：

很难想象你想要什么，但这应该让你开始。

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