如何在Ext.panel.Tool中使用字体awesome

Question

我需要自定义一个Ext.panel.Tool,从网格标题中的字体awesome中显示图标'fa fa-file-excel-o'.按照我在网上找到的,我已经宣布了这个工具:

    header: {
    itemPosition: 1, // after title before collapse tool
    items: [{
        xtype: 'tool',
        type: 'export',
        cls:'component-tool-export',
        handler: 'doExportData'
    }]
    },

和css:

.component-tool-export .x-tool-export{
  background-image:none !important;
  content: "\f1c3" !important;
}

该工具在那里,我可以点击它,但不显示图标.任何人都可以给我一些提示来解决这个问题吗？

Answer 1

您没有将内容添加到:before伪元素,这是显示内容所必需的.您可以使用以下CSS:

.component-tool-export .x-tool-export{
  background-image:none !important;
  font: 16px/1 FontAwesome;
}
.component-tool-export .x-tool-export:before{
  content: "\f1c3" !important;
}

但如果您已经使用过Sencha CMD,我建议您使用Sencha自己的SASS文件,并使用Sencha Fashion的完整功能集:

$tool-export-glyph: dynamic($fa-var-file-excel-o $tool-glyph-font-size $font-icon-font-family);

.#{$prefix}tool-export {
    @include font-icon($tool-export-glyph);
    background: none;
}