ExtJS FontAwesome改变字形颜色

Question

我刚刚将FontAwesome添加到ExtJS应用程序中。

我在标签上加了一个字形：

items: [
        {
            title: 'Dashboard',
            glyph: 0xf009,
            padding: '5',

​

​

我想换一下雕文的颜色，可以吗？

Answer 1

这应该是可行的：

.x-panel-header .x-panel-header-glyph {
    opacity: 1;
    color: red;
}

您可以在这里看到它的作用：http://extjs.eu/examples/#complex-data-binding

Answer 2

我尝试了萨基的方法

.x-面板-标题.x-面板-标题-字形{不透明度: 1；颜色:红色；}

但是，您没有可以更改特定字形属性的控件，如果我想将其设置为单个字形，则需要更加努力地工作。

我用一种简单的方法：

步骤1:向css文件添加一个链接

链接href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css“rel=”样式表“

步骤: 2:使用iconCls

iconCls：" fa -lg fa-futbol-o 字形“

在这里，我使用了令人敬畏的类" fa -lg-fa-futbol-o“，但我添加了”字形“，这样它看起来会比没有的更好。

步骤3:在css文件中定义“字形”。

.glyph {边距-顶部: 3px；}

第4步:定义任何css，您可以应用于字形类似的颜色。

结果：

在css文件中：

.glyph {边距-顶部: 3px；} .youname {颜色：#15498B；}

在js中(每个有配置iconCls的地方)

iconCls：" fa -lg fa-futbol-o字形青苗“

Answer 3

我知道这有点晚了，但是对于将来任何想要在Exts中使用自定义字体时更改字形图标的人来说。

在事件发生期间，我使用了对控制器中按钮的引用。然后，我得到按钮ID，然后使用get方法锁定按钮，并将"-btnIconEl“连接到按钮ID，因为任何字形/图标都将具有该CSS。

        'button[action=displayGrids]' : {
            click: function(button) { 
                Ext.get(button.id + '-btnIconEl').setStyle('color', '#ffffff');                   
            }
        }