How to change the color for a PICTO

Question

I'm using Sencha Touch 2, I have a PICTO declared in a button, at the moment the picto appears in black color. I would like to change it to color white.

How can I do it?

{
    xtype: 'button',              
    text: 'Settings',
    itemId: 'settingsButton',
    align: 'right',
    iconMask: true,
    iconCls: 'settings9'
}

Answer 1

If you take a look at the HTML for a button that contains a picto, it looks like this :

If you click on the span with the x-icon-mask CSS class you can see that the color of the icon is set like so :

So, all you have to do is to add a CSS class to you button (ex: cls: 'myBtn') and then create add the following to your CSS file :

.myBtn .x-icon-mask {
  background-color: #123456
  background-image:none;
}

Hope this helped