Replace Panel Tool von ehrfürchtigen Schriftart-Symbol

Question

Es ist möglich, ein Panel-Tool durch ein tolles Schriftart-Symbol zu ersetzen.

Ich habe mehrere Versuche mit CSS gemacht, aber es funktioniert nicht.

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

Answer 1

Sie sind auf dem richtigen Weg, aber das Problem ist, dass ExtJS 5 den img Tag für Werkzeugelemente verwendet, und there's a "minor" issue with :before pseudo elements for img tags. Sie werden rund um die arbeiten müssen, indem die ursprüngliche Ext.panel.Tool Anhängen eines span stattdessen zu verwenden, wann immer Sie brauchen, dass:

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

Dann können Sie einige Tools sagen ui:"glyph" zu verwenden, die in der Überschreibung verwendet wird, dass ein div zu erkennen somit sollte verwendet werden, so dass :before Pseudo-Elemente und somit ein FontAwesome icon:

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

und dann wird das Symbol technisch angezeigt:

Sie nur FontAwesome zu dem Projekt hinzufügen und Ihre Sheet ändern:

@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

Aufschalten .x-Panel-header-Titel-default.x-Panel-header-default CSS-Klasse und ein Hintergrund "awesome Symbol" Bild hinzufügen.

---

Edit:

Es ist schwer zu visualisieren, was Sie wollen, aber das sollte Ihnen den Einstieg.

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