How to use an image as a button in jQuery Mobile?

Question

I went through a search about how default buttons in jQuery Mobile can be replaced by custom images, as I am implementing code to build a PhoneGap app. I found this one useful link.

I have code like this:

<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom">Custom Icon</a>

And the CSS is:

.ui-icon-myapp-settings {
  background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

Still it shows a + icon and not my icon.

css directory -- ../css/style.css
image directory  ../css/images/settings.png

And I get a view like:

What's wrong with the code or Image location?

Answer 1

If you need something bigger than the icon, in order to use an image, as a button, just use the following:

<a href="venta.html" data-theme="" id="ventaOption"> <img src="css/images/standard/shoppingcart.png" width="26" height="26"> <br/> Ventas </a>

Answer 2

Try this:

<a data-role="button" href="#" data-shadow="false" data-theme="none">
  <img src="images/imagefile.png" border="0"/>
</a>

set the "data-theme" to "none" on your button and add "data-shadow="false".