在带有图标的Jquery按钮中：图标和文本之间没有空格？

多亏了jQuery UI，我可以轻松地：

• 只有文本的按钮
• 具有带有文本+图标的按钮
• 只有带有图标的按钮

问题是字体太大，所以我添加了这个css：

.ui-button .ui-button-text { 
    font-size:60%;
}

但现在的问题是，我的图标和文本之间没有任何空间

有关演示（JSFIDLE），请参见此处：

有什么办法吗

---

谢谢。

在文本前添加一个或两个不间断空格。像这样。因此，不要只是“测试”，而是使用
“测试”
我已经看到了您链接到的演示，我使用了代码并为您获得了解决方案。这是CSS

<a data-bind="click: greet, jqButton: { icons: { primary: 'ui-icon-gear' }}">&nbsp&nbsp&nbspTest</a>

.ui-button .ui-button-text { 
    font-size:60%;
    min-height: 13px;
    margin-left:5px;
}​

给左边的文本留一个空白，你会看到添加了空格

我希望我能帮助您。
[UPDATE]：使用左边距规则不适用于仅图标按钮。我用
文本缩进
规则替换了
左边距
规则，这似乎解决了问题

添加以下CSS规则

.ui-button-text:nth-child(2) {
    text-indent: 5px;
}​

这指示父级的第二个子级的任何
ui按钮文本
类的左边距应为5px。在这种情况下，当标签前面有图标时，它始终是第二个子标签

了解有关第n个子伪选择器的详细信息

[更新]
Internet Explorer—特别是旧版本—不正确支持第N个chil伪选择器。在这种情况下，应该使用jquery强制IE使用其他类

在IE独占CSS文件中添加以下类：

.button_left_margin_label {
    text-indent: 5px;
}

使用jQuery，强制IE将上述类用于搁置图标的标签：

if IE {$('.ui-button-text:nth-child(2)').addClass('button_left_margin_label');}

您是否尝试过
？是的，但不是很优雅：）我想我的css>.ui按钮有问题。ui按钮文本{font size:60%；}谢谢您的回复，但我已经尝试过这个解决方案。正如您可以在JSFIDLE中看到的，只有带有图标的按钮，右边的空间太大了。我想要一个解决方案，其中每个不同的按钮的格式都正确。谢谢，但当我回复Anirvan时，这个解决方案不适合我，因为所有按钮的格式都不正确：在只有图标的按钮中，左边有太多的空间。我同意这个解决方案有效，但我希望有一个比在文本前添加一些空格更优雅的解决方案…这似乎是一个很好的解决方案，但不幸的是，它不适用于只有图标的按钮。我尝试IE和Chrome，但没有成功。看这里：我明白了。。。因此，通过“文本缩进”规则更改“左边距”。这就是解决问题的方法：）