如何在 Ext.panel.Tool 中使用很棒的字体
How to use font awesome in an Ext.panel.Tool
我需要自定义一个 Ext.panel.Tool 以在网格的 header 中显示来自 font 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;
}
工具已经有了,我可以点击它,但是没有显示图标。谁能给我一些提示来解决这个问题?
您没有向 :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;
}
我需要自定义一个 Ext.panel.Tool 以在网格的 header 中显示来自 font 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;
}
工具已经有了,我可以点击它,但是没有显示图标。谁能给我一些提示来解决这个问题?
您没有向 :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;
}