How to add jQuery UI Button icons to input buttons?

Is it possible to use jQuery UI Button icons with <input type="submit"> elements?

The documentation example uses <button> elements, but it does not explicitly say whether or not icons work with input buttons. I'd like to add icons to ASP.NET Button controls which render as <input type="submit">.

This is what I've tried:

$("input.add").button({ icons: { primar开发者_如何学Cy: "ui-icon-circle-plus" } });

The button is styled correctly except for the missing icon. Am I missing something?

You are doing it right. It just does not seem to work on input elements. A cursory look at the source code for JQuery UI Button shows that it prepends <span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span> to the element getting the icon but this does not seem to happen on input elements.

Actually looked a bit closer. Not sure how I missed this the first time but the source contains the following:

if ( this.type === "input" ) {
  if ( this.options.label ) {
    this.element.val( this.options.label );
  }
  return;
}

Which basically tells the code to exit before the span is prepended/appended on input elements. So this is by design.

As Bradley Mountford states, Submit elements are not styled with icons by design (why that's the design, I have no idea).

Change your asp:Button to a asp:LinkButton and all is right in the world. Yep, it really is that easy.

My problem was overwritten styles, so this solution helped me:

$('input.add').each(function(){
          $(this).replaceWith('<button  class="add" type="' + $(this).attr('type') + '">' + $(this).val() + '</button>');
});
$('.add').button({ icons: { primary: 'ui-icon-circle-plus' } });

i'm looking for this solution and i found my one that works perfect

javascript

$(function () {

    //botoes de login

    $("#btnLogin").button({
            icons: { primary: "ui-icon-key" }
        }).hide().after('<button>').next().button({
            icons:
            {
                primary: 'ui-icon-key'
            },
            label: $("#btnLogin").val()
        }).click(function (event) {
            event.preventDefault();
            $(this).prev().click();
        });
    $("#close").button({ icons: { primary: "ui-icon-close" } });
});

webform

<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />