javascript - Extjs - 在标签标题上对齐图标

Question

在 Extjs 中使用 tabpanel，我想使用 setIconCls 在标题旁边的选项卡上设置一个图标；

这是我得到的：

我怎样才能将它对齐到左边？

Ext.getCmp('updates').setIconCls('notification_icon');

--

.notification_icon{  
    background-image: url("../icons/notif.png") !important;   
    width: 40px !important;
}

我试过对齐和边距等......它只会向右移动，而它应该在字母'N'之前。

Answer 1

如果不知道您的元素结构，就无法准确思考。但这里有一些您可以尝试的选项。

1. 为图标添加右边距 -margin-rignt:10px;
2. 向文本添加左边距（如果您的文本在元素内） -margin-left:10px;
3. 向图标添加减号左边距 -margin-left:-10px;
4. 使用带有图标的左浮动 -float:left
5. 使用图标作为带有左填充的文本元素的背景图像。
6. 如果其中任何一个不起作用，您可以使用具有一行和两个单元格的表格来定位文本和图标。

Answer 2

你最初是如何得到这个结果的？只是改变background-image属性（没有别的）应该开箱即用......你很可能以某种方式覆盖了 Ext 的 CSS，你应该尝试修复它。

使用 Ext 的 vanilla CSS，margin-left正在努力水平移动图标。否则，默认情况下，图标跨度是绝对定位的，因此您可以尝试使用该left属性。