パネルツールをすばらしいフォントアイコンに置き換えてください

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

次にあなたがそのdiv要素を検出するために、オーバーライドで使用される、ui:"glyph"を使用するためにいくつかのツールを伝えることができます：あなたがいることを必要なときに代わりにspanを使用するように、元のExt.panel.Toolを追加していることを回避する必要がありますその後、アイコンは、技術的に表示される

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

と：

従って:before擬似要素を可能にし、従って、FontAwesomeアイコン、使用されるべきです

あなただけのプロジェクトに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-パネル・ヘッダー・タイトル・デフォルト.X-パネル・ヘッダー・デフォルト cssクラスと背景 "素晴らしいアイコン" の画像を追加します。

---

編集：

あなたが望むものを視覚化することは困難であるが、これはあなたが始める必要があります。

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