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. 如果已注释，则取消注释该行。