Question

Been trying to add a icon to a button but cant seem to get it working.

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>

The first button shows no icon and the second the icon and text are not inline. What would be the best way to add a icon?

Thanks

UPDATED

Ok part of it is my fault for not closing the button tag. It loads the icon with the text on the next line.

HTML from browser

<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

Your HTML code for button with icon should like this:

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

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

Please make sure you dont have 2 elements with same ID.