How to assign custom image to jQuery UI Button

You have already seen, How to use jQuery UI Icons in jQuery UI Button, but what if you are not fan of these icons and you want to have your own/custom image on the jQuery UI button, instead of these built-in icons. This can be done but it is not a straight forward thing but not difficult also.

As there is no property/attribute supported by jQuery UI Button to assign a custom image so one need to use a different path.

All is required to add an image around the button and set the text to empty string. And then attach jQuery UI Button to the HTML button.
$(document).ready(function() {
    $("#btnClose")
        .text("")
        .append("<img height="100" src="logo.png" width="100" />")
        .button();
});​
See result below


See Complete Code
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..