Question

尝试向按钮添加图标但似乎无法使其正常工作。

JS

$(document).ready(function(){ 

   $("button, input:submit, input:reset, input:button", "#customer_wrapper").button();

   $("#save_customer").button({
       icons: {primary: 'ui-icon-disk'}
   });

});

HTML

<button name="save_customer" id="save_customer" value="Save" />Save</button>

第一个按钮不显示图标，第二个按钮显示图标和文本不是内联。添加图标的最佳方式是什么？

由于

已更新

好的部分原因是我没有关闭按钮标签。它会在下一行加载带有文本的图标。

来自浏览器的HTML

<button id="save_customer" name="save_customer" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" aria-disabled="false">
   <span class="ui-button-icon-primary ui-icon ui-icon-disk"> </span>
   <span class="ui-button-text">Save</span>
</button>

CSS

.ui-icon-disk {
  background-position: -96px -112px;
}
.ui-button .ui-button-text {
  display: block;
  line-height: 1.4;
}

Answer 1

带图标的按钮的HTML代码应如下所示：

<button name="save_customer" id="save_customer">Save</button>

http://jsfiddle.net/ynhat/fWkbv/

请确保您没有2个具有相同ID的元素。

Answer 2

默认情况下，主题的图像需要位于CSS文件下方的图像目录中。确保它们存在于正确的目录中。

jQuery添加图标按钮问题

2 个答案: