jquery mobile: How to insert an image into button

Question

I have this kind of problem. I have button:

<button type="button" data-theme="c">test</button>

And here instead of text TEST I would like to insert my picture:

<img src="resources/images/test-icon.png" align="middle" />

I tried a couple of options but I couldn't find the solution.

Thank you for all your help!

Answer 1

Bacause you selected that tag I would assume you are using jQuery mobile styled buttons and not classic native browser button version.

If this is the case your example would never work. Also while Amits example is a good one it will never work in jQuery Mobile. When jQuery mobile styles a button it hiddes old one and creates a new one out of a a tag. Then it takes button text and redirects click events to the real (now hidden) button.

We can use this information to modify new button styles. Unfortunately in case of inputt button and input submit it can't be done without javascript.

So I will show you another solution.

jQuery Moible button can also be constructed like this:

<a data-role="button" class="custom-button">Button text goes here</a>

We can easily modify this button through pure css, and here's a working jsFiddle example: http://jsfiddle.net/Gajotres/2C8Rj/

HTML :

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <a data-role="button" class="custom-button"></a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>  

CSS :

.custom-button {
    height: 50px !important;
}

.custom-button .ui-btn-inner {
    padding: 0 !important;    
}

.custom-button .ui-btn-inner .ui-btn-text {
    display: block !important;
    height: 50px !important;
    width: 100% !important;
    background-image: url('http://shop.ascd.org/images/red-error.gif') !important;
    background-repeat: no-repeat  !important;
    background-position: center  !important; 
}