Sencha Touch底栏图标不显示

Question

我无法在 Sencha Touch 应用程序上查看底部栏图标。

我正在使用指南针和 scss 来设置应用程序的样式。 实际上，经过研究，我正在使用混合：

@include pictos-iconmask('home');

导入标签栏中使用的图标。

条形元素是这样定义的：

{ 标题：'常见问题'， iconCls: '星' },

而且似乎定义明确，在 Safari 中，检查器显示 -webkit-mask-image:theme_image("default", "pictos/home.png");属性，但这是删除线。在 Chrome 中没有出现该属性，该问题可能是什么原因造成的？

附加的图像显示了两种情况，在顶部的 Safari 和我提到的属性。在底部没有 Safari 显示的“损坏”占位符的栏。

我找到了一个增加图标 z-index 属性的解决方案，但我尝试了这个没有运气。

解决方法是这样的：

.x-tabbar > * {
  z-index: 999 !important;
}

感谢任何帮助！

编辑 1：有人知道吗？

Answer 1

在 Sencha Touch 2.4.x 中，您需要执行以下操作：

1. 安装 Rub
2. 指南针
3. 导航到应用主文件夹（即到 index.html 文件的级别）
4. 在终端运行sencha app watch

5. 打开 resources/sass/app.scss 并添加以下代码：

   // 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');
   

6. 你的标签面板项目应该有iconCls这样的设置：

   {
       .....,
       title: 'Favorites',
       iconCls: 'heart'
   }
   

附加（可选）步骤：

1. 有时iconCls 已在框架中被注释掉（这在我之前发生过一次）。在这种情况下，请转到 AppName/touch/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss

2. 在文件中搜索一行代码：

   @else if ($name == "star") { @return "S"; }
   

3. 如果该行已被注释，请取消注释。