jQueryUI图标始终显示在顶部而不是内联

Question

我想用jQueryUI创建一些按钮，并带有一些图标以获得更好的风格。我的问题是图标总是显示在按钮文本的顶部。是否有可能显示图标始终与文本内联？

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<button><sub class="ui-icon ui-icon-closethick ui-btn-icon-left"></sub>Delete Result</button>

JS

$(function() {
$( "input[type=submit], a, button" )
.button()
.click(function( event ) {
event.preventDefault();
});
});

以下是jsfiddle与代码的链接，以便您可以想象我的意思：http://jsfiddle.net/14sxbj59/

非常感谢你！

Answer 1

使用您的代码添加以下内容：

.ui-state-default .ui-icon {
    display: inline-block;
}

检查Fiddle。

Answer 2

.ui-icon类默认启用了display: block样式。

您需要将其更改为inline-block才能使其正常工作。在本例中，我使用了您创建的.ui-btn-icon-left类。

.ui-btn-icon-left
{
    display: inline-block;  
    margin: 0;
}

JSFiddle