Question

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

我在标签中添加了一个字形：

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

enter image description here

我想改变字形颜色，这可能吗？

Answer 1

这应该有效：

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

您可以在此处看到它：http://extjs.eu/examples/#complex-data-binding

Answer 2

我尝试了Saki方式

.x-panel-header .x-panel-header-glyph { 不透明度：1; 红色; }

但是你没有控制权来改变特定字形的属性，如果我想为单个字形设置它，我将需要更加努力。

我用一种简单的方法：

步骤1：添加指向css文件的链接

link rel =＆＃34; stylesheet＆＃34; HREF =＆＃34; // maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"

步骤：2：使用iconCls

iconCls：＆＃34; fa fa-lg fa-futbol -o 字形＆＃34;

在这里，我使用了很棒的课程＆＃34; fa fa-lg-fa-futbol-o＆＃34;但我添加了＃34;字形＆＃34;所以看起来比没有好看。

第3步：定义＆＃34;字形＆＃34;在你的css文件中。

.glyph {margin-top：3px; }

第4步：定义任何可以应用于颜色等字形的CSS。

结果：

在css文件中：

.glyph {margin-top：3px; }

.youname {color：＃15498B; }

在js中（每个你有配置iconCls的地方）

iconCls：＆＃34; fa fa-lg fa-futbol -o glyph youname＆＃34;

Answer 3

我知道这有点晚了，但对于将来使用自定义字体和Exts时想要更改Glyph图标的其他人。

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

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

ExtJS FontAwesome更改字形颜色

3 个答案: