how to wrap a img/icon on button in phonegap app?

Question

Hi I am building a phonegap css3 and html5 app. It contains two button in the same row with a icon wrap on the button and a text below the img. But the image is not display on the button.

_______________________________________
|    ____            ______           |
|   |    |          |     |           |
|   |    |          |     |           |
|   |----|          |-----|           |
|   button1         button2           |
|                                     |
|                                     |
|                                     |
|_____________________________________|

This is my HTML.

<a href="#button1Page" data-role="button" data-icon="button1" data-iconpos="top" data-transition="pop"> Button 1</a> <br>
<a href="#button2Page" data-role="button" data-icon="button2" data-iconpos="top" data-transition="pop"> Button 2</a> <br>

and this this is the css of the app.

ui-icon-button1  {
    background-image: url("img/icon1.png");
}
.ui-icon-button2 {
    background-image: url("img/icon2.png");
}

Kindly help me.

Answer 1

You are referring to classes in your css, but no element has those classes. Add the classes where you need them. So you need

class="ui-icon-button1"

and

class="ui-icon-button2"

in the tags where you want the style to be applied.