View Full Version : Adding Custom icon in the tab bar

24 Oct 2010, 9:02 PM
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????

25 Oct 2010, 3:16 AM
Yes, show us your CSS, also take a quick look in the search result :


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

25 Oct 2010, 9:35 AM
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?

12 Nov 2010, 7:25 PM
how do I become the url tag?
Inside the "URL tag" is a base64 encoded image. You can go to

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

28 Mar 2012, 4:36 AM
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');