css - 无法使用 actioncolumn 和 iconCls 从字体库呈现图标

Question

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

<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 可以与“字形”一起正常工作。

Answer 1

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

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

代替

icon: ...,

你写

glyph: 'xf0aa@FontAwesome',

我刚刚为此制作了一个 ExtJS 4.2 fiddle 。效果很好:http://jsfiddle.net/mmfs3678/3/