在自定义的TabPanel图标失败

Question

我想自定义图标添加到的TabPanel，但是当我这样做，它只是显示一个带有圆角的暗箱。

我的CSS看起来像这样： http://pastebin.org/447682

在URL中的代码是用于一些随机RSS的base64图标I在网上找到。 我还试图相对URL添加到图像，但没有任何成功。

如果我改变代码以使用一个base64从EXT-touch.css文件（ http://pastebin.org / 447685 ）它工作一切正常，那么，为什么不是接受我的“自定义”图标？

请注意：我并不需要一个RSS图标。我只是去尝试用于测试目的。

Answer 1

MrSoundless - 我曾在煎茶触摸的主题引擎。问题是，底部卡使用的图标，而不是传统的背景图像的WebKit口罩。这使我们能够填补的形状的传递，所以我们可以动态地改变其在选择颜色的图标。在那里，使用background-image代替-webkit-mask-box-image得到一个传统形象。 Base64编码如你应该仍然是好的。

Answer 2

例如在HTML文件

 .image{
-webkit-mask-box-image: url('/public/images/btn.png');
}

和使用以上定义的图像在你的TabPanel

iconCls: 'image',

Answer 3

虽然这个问题被问在2010年，它仍然来到了，当我寻找解决的办法。这个功能似乎煎茶2.0已经改变了，我花了一段时间的战斗，所以这里是什么是需要2.0兼容性：

<强> CSS /内嵌样式表

.x-tab .x-button-icon.XXXXX,
.x-button .x-button-icon.x-icon-mask.XXXXX {
  -webkit-mask-image: url('/img/1.png');
}

<强> App.js标签面板定义

{
    title: 'Your tab title',
    iconCls: 'XXXXX'
}

其中xxxxx是您的自定义图标的名称。

希望有所帮助。