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

Question

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

我用 CSS 做了几次尝试，但没有用。

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

Answer 1

覆盖 ~~.x-panel-header-title-default~~ .x-panel-header-default css class 并添加背景 "awesome icon" 图片。

编辑：

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

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

Answer 2

你走在正确的轨道上，但问题是 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 图标：

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;
}

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

Replace panel tool by awesome font icon

extjs

panel

font-awesome

extjs5