Hi guys,
if you want to make a great Sencha Touch mobile application, you don't have to edit Sencha Touch CSS, but use SASS and Compass to create your own theme.
Take a look at this video to learn how.

2) transform the image to binary, online link
http://www.greywyvern.com/code/php/binary2base64
does what it says it does

3) then you get the binary, and you replace it on the url.
the code generated goes where the phrase replace here ....binary in step 1 is located
be sure to leave the leading comma and the trailing single quote in place

adding semi-colon to end is optional (if it is the last statement in the CSS set). It is still preferred to show that the style attribute:value pair is done, and it is required if you have other CSS attribute:value pairs after it.

For single quote or double quote, both will work for the 'ui' value, it doesn't matter

Sasha172

12 Feb 2012, 10:53 PM

I followed the instructions perfectly but my iconCls is showing up as a blank grey box.

I'm trying to use the sencha touch 'speedometer2' as the iconCls. The icon is already in pictos folder. But no matter what I do it doesnt work :(

Help !

Naga

13 Feb 2012, 2:48 AM

Hi,

You just add it in your .html file

.sample {
-webkit-mask-box-image: url('/public/images/sample.png');
}

and refer it in your button by

iconCls: 'sample ',

it's working fine for me.

Regards,
Nag.

lpfx

27 Feb 2012, 5:48 PM

I followed the instructions perfectly but my iconCls is showing up as a blank grey box.

I'm trying to use the sencha touch 'speedometer2' as the iconCls. The icon is already in pictos folder. But no matter what I do it doesnt work :(

Help !

Sasha172, have you figured it out?

I'm having the same problem.

Can someone help me?

Sasha172

27 Feb 2012, 7:53 PM

Hi,
I managed to solve the problem. And since people still seem to be getting stuck here, I put up the steps on my blog. Take a look :)

If your creating your own Sencha Touch 2 theme, it's better to use SASS. They documented this part very well and you are good to go in less then a hour.

If you done this, you need to add this in you SASS style file:

@include pictos-iconmask('your_icon_png_file_name');

Now, you NEED to save you icon (60x60) in a specific location. Inside the root of Sencha Touch, the correct path is:
resources/themes/images/default/pictos

Save your .png file here and it works :)

Let me know if this works for you too!

daffodilskkk

27 Jun 2012, 11:42 PM

.x-tab .x-button-icon.newicon,.x-button .x-button-icon.x-icon-mask.newicon{-webkit-mask-image:url(../sencha-touch-2.0.0-commercial/resources/themes/images/default/pictos/compose2.png)};
Put this in ur senha page and in code make following changes:

items : [
{
title: 'Sample',
iconCls: 'newicon '
}]

guilhermevrs

6 Jul 2012, 12:48 PM

I know the thread is old, but maybe more people will have this problem. I think the main problem is that you can't just edit your sass file, but you need to compile it as well.