View Full Version : default icon set

24 Nov 2010, 6:39 AM
where do i find a list of the icons included by default. if there are bitmaps somewhere that i can view that would be great.

Steffen Hiller
24 Nov 2010, 12:11 PM

29 Nov 2010, 12:48 PM
ok, i am trying to do something very basic and it isn't working. i just want to change the name and picture of some of the bottom row icons in the icon example. i am editing the index.js and just changing the names like the following.

icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var tabpanel = new Ext.TabPanel({
fullscreen: true,
// type: 'light',
tabBar: {
dock: 'bottom',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'center'
cls: 'card1',
html: 'Both toolbars and tabbars have built-in, ready to use icons. Styling custom icons is no hassle.<p><small>If you cant see all of the buttons below, try scrolling left/right.</small></p>',
items: [
{ iconCls: 'home', title: 'Home' },
{ iconCls: 'music1', title: 'Music' },
{ iconCls: 'favorites', title: 'Shows' },
{ iconCls: 'tv', title: 'Twitter' },
{ iconCls: 'more', title: 'More' },

do you seen what i am doing wrong?

30 Nov 2010, 7:58 AM
Only a few icon are defined in sencha touch css, you have to define your icon in a custom css like this:

.iphone {-webkit-mask-box-image: url(../images/iphone.png)}

where iphone is the name you have to put in iconCls

30 Nov 2010, 8:46 AM
i am completely new and hate to keep asking question but what is iconcls and where is it located.

30 Nov 2010, 8:54 AM
Just look at the code...

{ iconCls: 'home', title: 'Home' },
{ iconCls: 'music1', title: 'Music' },
{ iconCls: 'favorites', title: 'Shows' },
{ iconCls: 'tv', title: 'Twitter' },
{ iconCls: 'more', title: 'More' },

30 Nov 2010, 9:11 AM
you can easly add the pictos to your css by add them to your theme scss file and then new compile it

in your theme.scss

# do not include default icons
$include-default-icons: false;
# add the icons you want to have. you use the file name without .png
@include pictos-iconmask("warning_black");