Problem getting custom icon to show in tabBar

[logicmedia]

Hi all,

I have a simple Panel with a tabbar and would really like to get a custom icon in the bar. The code looks like this:



<style>
.overview {
background-image: url(/images/buttons/overview.png) no-repeat !important;
}
</style>

<script type="text/javascript">
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
items: [{
id: 'id_btn',
title: 'Test',
html: 'lorem lipsum...',
iconCls: 'overview'
}]
});
}
});
</script>
Unfortunatly the icons does not show - all I get is a blue square!!

Any ideas on how to do this?

Regards,

Thomas

[uxdan]

i ended up getting mine to work with the -webkit-mask-box-image, as i think the tab bar renders its own image to which you need apply your icon mask.



img.overview { -webkit-mask-box-image: url("images/buttons/overview.png"); }

[logicmedia]

Thanks a lot... That does the trick!