View Full Version : Adding Custom Icon to TabBar

17 Sep 2010, 4:41 AM
Just getting started with this...

I have a custom icon in a .psd file - what are the steps to adding it to the Tab bar? sizing, format, handling states, etc. Are there step-by-step instructions somewhere?


18 Sep 2010, 12:08 AM
Hi, for first your icon must be a 60x60 pixel transparent png, then:
add the following to your custom css file:

.login {-webkit-mask-box-image: url(../images/login.png)}
of course replace css name and icon url to reflect yours
to use your custom icon in tabbar:

{ iconCls: 'login', title: 'Login'}

That's all...

18 Sep 2010, 2:19 AM
How to make the Kiva Application for iPhone. can anyone say?

20 Sep 2010, 5:49 AM
Thanks for your help. This is what I ended up adding to make this work:

in custom .css:
.photos-icon {-webkit-mask-box-image: url("./photoIcon.png")}

in .js code: (tabPanel.items)

title: 'Photos',
iconCls: 'photos-icon',
icon: "./photoIcon.png"