如何从 FontAwesome 更改图标的颜色

Question

我有一个带有指定图标的菜单项，如下所示：

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

如何访问 css 中的这个图标并更改它的颜色？

Answer 1

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

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

如果您只想更改某些图标，您应该为此制作一个特殊的 class：

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

然后将新颜色添加到 CSS:

.greenIcon {
    color: green;
}

Answer 2

跳过 'iconCls'（和 'glyph'）并在与 extjs 组件的 text/header/title:

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

How to change the colour of an Icon from FontAwesome