CODEWITHSUNDEEP
extjsextjs4.1extjs4.2font-awesome
VAAA
VAAA

Reputation: 15049

ExtJS FontAwesome change Glyph Color

I just added FontAwesome to my ExtJS application.

I added a Glyph to my tab:

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

enter image description here

I would like to change the Glyph color, is that possible?

Upvotes: 1

Views: 7686

Answers (3)

Zion Bokobza
Zion Bokobza

Reputation: 91

I tried the Saki way

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

but then you don't have the control to change attributes for specific glyph and if I want to set it for individual glyph I will need to work harder.

I use a simple way:

Step 1: add a link to the css file

link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"

Step: 2: use iconCls

iconCls: "fa fa-lg fa-futbol-o glyph"

here I used the awesome classes "fa fa-lg-fa-futbol-o" but I added "glyph" so it will looks better than without.

Step 3: define "glyph" in your css file.

.glyph { margin-top: 3px; }

Step 4: define any css you can apply to the glyph like color.

The result:

in css file:

.glyph { margin-top: 3px; }

.youname { color: #15498B; }

in js ( every where you have config iconCls )

iconCls: "fa fa-lg fa-futbol-o glyph youname"

Upvotes: 2

Kal
Kal

Reputation: 2309

I know this is a little late but for anyone else in the future who wants change Glyph icons when using custom fonts with Exts.

I used the reference to the button in my controller passed in during the event. I then got the buttons ID then target the button using the get method and concatenating "-btnIconEl" to the the button ID as any glyph/icon will have that CSS. 

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

Upvotes: 0

Saki
Saki

Reputation: 5856

This should work:

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

You can see it in action here: http://extjs.eu/examples/#complex-data-binding

Upvotes: 1

Related Questions