Sencha Touch bottom bar icons not showing - css

Question

i'm having problems to see the bottom bar icons on a Sencha Touch app.
I'm using compass and scss to style the app.
Actually, after a research i'm using the mixing:
#include pictos-iconmask('home');
to import the icons that are used in the tabbar.
The bar elements are defined i that way:
{
title: 'FAQ',
iconCls: 'star'
},
And seems to be well-defined, in Safari the inspector shows the
-webkit-mask-image:theme_image("default", "pictos/home.png"); property but this is strikethrough. In Chrome the property doesn't appear, what could be the cause of that issue?
The attached image shows both scenarios, at the top Safari and the property that i mentioned. At bottom the bar without the "broken" placeholder that Safari shows.
I found a solution that increments the icons z-index property, but i tried this with no luck.
The workaround is like this:
.x-tabbar > * {
z-index: 999 !important;
}
Any help is appreciated!
EDIT 1: Someone have any idea?

Answer 1

In Sencha Touch 2.4.x you need to do the following :
Install Rub
Compass
Navigate into the app home folder (i.e. to the level of the index.html file)
In Terminal run sencha app watch
Open the resources/sass/app.scss and add the following code:
// This is different in 2.4.x. In earlier versions it was pictos-iconmask as you've indicated you tried in the question.
#include icon('browser');
Your tab panel item should have the iconCls set up like so:
{
.....,
title: 'Favorites',
iconCls: 'heart'
}
Additional (Optional) Step:
Sometimes the iconCls has been commented out in the framework (this has happened to me once before). In that case, go to AppName/touch/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss
Search in the file for a line of code that reads :
#else if ($name == "star") { #return "S"; }
Uncomment the line if it's been commented.