Creating new icon cls

[miroperez]

What are the steps to create new icons like the ones in the shipping css? I tried copying an existing one then made minor changes to one like this:

      .x-button-plain.x-button-mask img.play, .x-toolbar .x-button-plain.x-button-mask img.play,
      .x-button-plain.x-button-pressed.x-button-mask img.play, .x-toolbar .x-button-mask.x-button-mask img.play, .x-button-mask.x-button-mask img.play
       {
        -webkit-mask-box-image: url('next.png'); 
       }

Am I missing something?

[elementsofway]

I'm guessing this thread is dead, but just in case anyone else stumbles upon it, here's an example of adding a custom icon to a tab panel...

Add this to your CSS:

.x-tab img.callReport, .x-button img.x-icon-mask.callReport {
	-webkit-mask-image:url('179-notepad.png'); 
}

Within your code, use:

{
	title: 'Call Report',
	html: 'Hello World!',
	iconCls: 'callReport'
},

[AndreaCammarata]

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.

http://vimeo.com/17879651

Hope this helps

[acidfilez]

1) Add this to your css:


.x-tab img.import, .x-button img.x-icon-mask.import {
-webkit-mask-image: url('data:image/png;base64,replace here .... binary');
}

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

3) then you get the binary, and you replace it on the url.

4) create the button on your sencha

var importBtn = new Ext.Button({
iconCls: 'import',
iconMask: true,
ui: 'plain',
handler: function() {
alert('Funciona Mierda');
}
});

yes, import is your image button.

enjoy

[rocky1946]

Tried the previous thread and it works with slight modifications

1) Add this to your css: (since I use an iPad the apple.css is the css to modify)

.x-tab img.import, .x-button img.x-icon-mask.import {
-webkit-mask-image: url('data:image/png;base64,replace here .... binary');
}
the semi-colon after the closed-parenthesis is not needed

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

4) create the button on your sencha

did not use the var importBtn = new Ext.Button
var importBtn = new Ext.Button({
iconCls: 'import',
iconMask: true,
ui: 'plain', used double quotes not single quotes to enclosed "plain"
handler: function() {
alert('Funciona Mierda');
}
});

since I already had the function defined elsewhere, simply added the following
to the items section where the buttons were to be displayed
my image button was named zoom_in

items : [{
iconMask : true,
ui : "plain",
iconCls : 'zoom_in',
handler : zoomIn
. . . . . .

[bastard]

Since this tread keeps popping up high on google for custom icons in Sencha, decided to include a reference link i found:

http://www.senchatouchbits.com/9/add...ine-icons.html

[wilzdezign]

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