无法使用Actioncolumn和iconCls从字体库中呈现图标

Question

我在index.html中拥有FontAwesome的以下内容：

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

网格中的项目为：

{
    text: 'Add',
    xtype: 'actioncolumn',
    flex: 1,
    align: 'center',
    items: [{
        iconCls: 'icon-circle-up',
        tooltip: 'above this'
    },{
        iconCls: 'icon-circle-down',
        tooltip: 'below this'
    }]
}

最后是相关的scss：

.icon-circle-up {
    font-family: FontAwesome;
    content: "\f0aa";
    display: inline-block;
    vertical-align: middle;
}

.icon-circle-down {
    font-family: FontAwesome;
    content: "\f0ab";
    display: inline-block;
    vertical-align: middle;
}

渲染网格时，我看到了图标和工具提示的占位符，但未渲染图标。其中一个图标呈现时具有以下内容：

<img role="button" alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-action-col-icon x-action-col-0  icon-circle-up" data-qtip="above this">

这里怎么了？是否无法从字体样式表中获取图标？如何获取图标？

[请注意，页面上的其他“图像”组件使用FontAwesome与'glyph'配合正常使用。

Answer 1

AFAIK这是不可能的，因为ExtJS将操作按钮呈现为'img'标签。如果不提供“ icon”参数，则在html代码中看到的图像为1x1像素的空gif。

但是@qdev在这里找到了解决方法：Font-Awesome ExtJS ActionColumn

代替

icon: ...,

您写

glyph: 'xf0aa@FontAwesome',

我为此专门为ExtJS 4.2做了一个小提琴。效果很好：http://jsfiddle.net/mmfs3678/3/

Answer 2

我知道这个问题可能是针对ExtJS 5的，但是对于使用ExtJS 6及更高版本的任何人，问题可能是fontCls参数丢失。

在ExtJS 6中，iconCls用以下符号指定：

iconCls: '{fontCls} {iconPrefix}-{iconName}'

所以，不只是fa-home，尝试如下指定x-fa fa-home：

iconCls: 'x-fa fa-home'

https://docs.sencha.com/extjs/6.0.2/guides/core_concepts/font_ext.html