Looks like 'all' available icons are displayed when a tabbar icon is not found...
I had it first on tab #1. Then I set something known to #1. Now I have it on #3...
Attachment 42908
Printable View
Looks like 'all' available icons are displayed when a tabbar icon is not found...
I had it first on tab #1. Then I set something known to #1. Now I have it on #3...
Attachment 42908
So you have to set the iconCls to something that isn't found to reproduce? I tried but I cannot reproduce:
but I have a feeling I'm not fully understanding you.Code:Ext.Viewport.add({
xtype : 'tabpanel',
tabBar : {
docked : 'bottom'
},
items : [
{
title : 'One',
iconCls : 'home'
},
{
title : 'Two',
iconCls : 'team'
},
{
title : 'Three',
iconCls : 'action123'
},
{
title : 'Four',
iconCls : 'more'
}
]
});
no, no - that is exactly what I'm saying. Tab #1 (speedometer1) and #3 (chart2) have non-standard icons whereas #2 (team) and #4 (more) are from the standard icons. When I leave them as they are then I get this:
Attachment 42913
When I set "speedometer" in #1 then this:
Attachment 42914
When I set "chart" in #3 then this:
Attachment 42915
But the worst is: I can not reproduce this with a test app!
I generated a new app with 2.2 and replaced the icon #1 with "speedometer1":
Attachment 42916
BTW: what's the easiest way to visualize the new icons from the icon-font? In older versions there was the folder with all the pictos. How are we supposed to do it with 2.2+?
ok, found out what's happening: I was using the icon speedometer1 (and others) in the app. So I had this in my sass file:
Now with V2.2 and all it's changes, I thought we would get the same icons, only the sass commands were changing. So I changed it like this:Code:@include pictos-iconmask('speedometer1');
Apparently this assumption was not correct. Although the result of specifying speedometer1 as iconCls had an interesting impact on the toolbar (see screenshots from previous post).Code:@include icon('speedometer1');
So the big questions that remains: where in V2.2 can I see which icons I can use? And how can I specify my own?
Here are all the icons: http://pictos.cc/font/
Save the picture in your SDK doc folder for easy access.
And regarding the inclusion of your own icons, you have to install a software which can create fonts and then create your own font using your pictos.
Another solution is to resuscitate the pictos-iconmask mixin in your customised theme and to use it for your custom icons. It also means having to do the work twice when wanting to theme those icons.
EDIT: From the 2.2 documentation, use http://icomoon.io to create your icon fonts.
thank you interfasys - very helpfull!
Just found out that the samples on the official sencha docs have the same issues:
http://docs-devel.sencha.com/touch/2...api/Ext.Button
This here should show the refresh icon only:
Attachment 42976
And this doesn't need further comments:
Attachment 42977