Custom icon in TabPanel fails

Question

Hi all,

I'm trying to add a custom icon to a TabPanel but when I do that it just shows a dark box with rounded corners.

My css looks like this: http://pastebin.org/447682

The code in the url is base64 for some random rss icon I found on the web. I also tried to add a relative url to an image but without any success.

If I change my code to use a base64 from the ext-touch.css file ( http://pastebin.org/447685 ) it works all fine, so why wouldn't it accept my 'custom' icon?

Note: I don't need an rss icon. I just tried that for testing purposes.

Answer 1

MrSoundless — I worked on the theming engine in Sencha Touch. The problem is that the bottom tabs use WebKit masks for icons, not traditional background images. This allows us to fill the shape of the icon you pass, so we can dynamically change its color on selection. To get a traditional image in there, use background-image instead of -webkit-mask-box-image. Base64 encoding as you are should still be fine.