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

Question

感谢jQuery UI，我可以轻松地：

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

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

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

但现在问题是我的图标和文字之间没有任何空格。

请参阅此处获取演示（jsFiddle）：http://jsfiddle.net/Rn9tg/71/

有没有修复？

感谢。

Answer 1

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

您只需为文本添加左边距，以便文本和图标之间有空格。查看jsfiddle。

Answer 2

在文字前添加一个不间断的空格（或两个）。像这样 jsFiddle 。因此，不要只是“测试”，而是使用"   Test"

Answer 3

我已经看过您链接的演示，我使用了代码并为您获取解决方案。这是CSS

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

给左边的文本留出边距，你会看到空格被添加。

我希望我帮助过你..

Answer 4

[更新] ：使用左边距规则不适用于仅图标按钮。我将left-margin规则替换为似乎可以解决问题的text-indent规则。

添加以下CSS规则

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

这表明任何ui-button-text类（父母的第二个孩子）的左边距应为5px。在这种情况下，标签始终是第二个子项，前面是图标。

在css-tricks了解有关nth-child伪选择器的更多信息。

[UPDATE] Internet Explorer（特别是旧版本）不能正确支持nth-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');}