View Full Version : Problem getting custom icon to show in tabBar

19 Jul 2010, 10:46 PM
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:

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

<script type="text/javascript">
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'
Unfortunatly the icons does not show - all I get is a blue square!!

Any ideas on how to do this?



20 Jul 2010, 5:28 AM
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"); }

20 Jul 2010, 5:31 AM
Thanks a lot... That does the trick!