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">

这里有什么问题？它无法从字体样式表中获取图标吗？我怎样才能获得图标？

请注意其他＆＃34;图像＆＃34;页面上的组件可以正常使用＆＃39;字形＆＃39;使用FontAwesome。

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

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

2 个答案: