CODEWITHSUNDEEP
extjsextjs6extjs6-classic
DeputyDylDog
DeputyDylDog

Reputation: 200

How to change the colour of an Icon from FontAwesome

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?

Upvotes: 3

Views: 5736

Answers (2)

Hank
Hank

Reputation: 41

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',
}

Upvotes: 4

Alexander
Alexander

Reputation: 20244

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;
}

Upvotes: 7

Related Questions