如何从FontAwesome更改图标的颜色

Question

我有一个指定了图标的menuitem，如下所示：

{
   xtype: 'menuitem',
   text: 'Random Text',
   iconCls: 'x-fa fa-briefcase',
}

如何在css中访问此图标并更改其颜色？

Answer 1

如果您想要更改所有图标，请按照EvanTrimboli的建议进行操作。在SCSS中，添加

$menu-glyph-color: dynamic(#008000);

如果您只想更改某些图标，则应为此创建一个特殊类：

iconCls: 'x-fa fa-briefcase greenIcon',

然后将新颜色添加到CSS：

.greenIcon {
    color: green;
}

Answer 2

跳过'iconCls'（以及'glyph'），并在与extjs组件的文本/标题/标题相同的字段中声明使用内联CSS样式化的webfont图标类：

{
   xtype: 'menuitem',
   text: '<i class="x-fa fa-briefcase" style="color:green;"></i> Random Text',
}