Adding Custom icon in the tab bar

[anishkumar]

Hello,I am trying to add custom icon in the toolbar.but it seems not working.i tried background-image instead of -webkit-mask-box-image.but this doesn't helps me....any ideas????

[gabrielstuff]

Yes, show us your CSS, also take a quick look in the search result :

http://www.sencha.com/forum/showthre...highlight=icon
http://www.sencha.com/forum/showthre...highlight=icon

Personnaly I do this :
1. adding class to myPanel:

    iconCls: 'icnHom',

Then in the CSS :

.icnHom {
-webkit-mask-box-image: url(data:image/png;base64,iVBORw0KGg..../LHEKZXOUWaBm2Pk95DylTf);}

[peterkuli]

Hello Gabriel,

How do I use the standard icons? If I do something like this (dockedItems of a panel):

items: [{
   iconCls: 'info',						
   title: 'Info'						
}]

I dont get the standard info-icon. Do I have to add the class to my custom CSS as you described? If yes, how do I become the url tag?

[tanjuGMX]

how do I become the url tag?

Inside the "URL tag" is a base64 encoded image. You can go to
http://www.greywyvern.com/code/php/binary2base64

Just enter the URL where you store the image and it translates it to base64

[ereztison]

in the .js file:

{
            xtype: 'tabbar',
            id: 'bottom-tab-bar',
            ui: 'dark',
            docked: 'bottom',
            layout: {
                pack: 'center',
                align: 'center'
            },
            items: [{
        id: 'contacts-tab-button',
                cls: 'selected',
                labelCls: 'tab-button-label',
                title: 'Contacts',
    },
...and so on with the other tabs
}

and in the css file:

#bottom-tab-bar {
    border-top: none;
    background-image: url('/sencha/resources/images/bottombar_background.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
}


/* control the active state of the child tabs */
#bottom-tab-bar .x-tab-normal {
    /* required for setting the image to our custom one */
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-size: 38px 38px;
    
    /* controls the label color */
    text-align: center;
    color: light-blue;
}


/* control the active state of the child tabs */
#bottom-tab-bar .x-tab-active {
    /* required for hiding the selected state box */ 
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}


.tab-button-label {
    font-size: 0.5em;
    color: light-blue;
}    


#contacts-tab-button {
    background-image: url('/sencha/resources/images/bottombar_contacts_icon_normal.png');
}


#contacts-tab-button.selected {
    background-image: url('/sencha/resources/images/bottombar_contacts_icon_selected.png');
}