Add an image to the jquery button

Question

I am wondering how to add an image to the jquery button. Till now I was using the jquery ui button in my project and I got custom images from the graphics team, so I would like to implement them.

submit.button({ icons: {primary:'ui-icon-trash'}, text: false })

How to add custom image to this jquery button?

Solution 1

<button>Trash</button>
<style>
    .ui-button ​.ui-button-icon-primary {
        background: url('/my-custom-trash-image.png');
    }​
</style>
<script>
    $(function() {
        $('button').button({
            icons: {
                primary: 'ui-icon-trash'
            },
            text: false
        });
    });
</script>

Unfortunately you do have to pass in a valid value for the primary icon even though it won't be used.

Live Example - http://jsfiddle.net/aMVrz/

Solution 2

I would just assign a class to the button...

$("#buttonId").button({

    icons: {primary: null},
    text: false

}).addClass("ButtonClass");

Then your CSS class could look something like this...

.ButtonClass
{
    background-image: url(../images/Button.png);   
    background-repeat: no-repeat; 
    border: none;    
}