How to change the colour of an Icon from FontAwesome

Question

I have a menuitem with an icon specified, like this:

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

How do I gain access to this icon in the css and change the colour of it?

Answer 1

If you want to change all icons, do as EvanTrimboli suggests. In SCSS, add

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

If you want to change only certain icons, you should make a special class for that:

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

and then add the new color to the CSS:

.greenIcon {
    color: green;
}

Answer 2

Skip 'iconCls' (and 'glyph' for that matter) and declare the webfont icon class styled with inline CSS in the same field as the extjs component's text/header/title:

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