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?

Solution 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>

Solution 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".

Solution 3

<a id='btnShowSignUp' href="#" data-shadow="false" data-theme="none"
                                    onclick="ShowSignUp();">
<img src="../assets/downArrow.png" style="height: 15px;">
</a>

Start off with anchor tag and add the href on click call method. Then add the img tag.

Solution 4

EDIT:

After looking at some of your comments I like you wanted a custom button image. Would something like this work?

• http://jsfiddle.net/DfDet/10/

I would look into a custom header or navbar, here are the docs:

• http://jquerymobile.com/test/docs/toolbars/docs-navbar.html
• http://jquerymobile.com/test/docs/toolbars/docs-headers.html

Original Answer Below:

You need to prepend ui-icon- to you data-icon attribute value, which in you example is myapp-custom

So your CSS class should be this:

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

HTML

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

jQM Docs:

• http://jquerymobile.com/test/docs/buttons/buttons-icons.html

Custom Icons
To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

Example: (Doesn't look nice but has the custom icon)

• http://jsfiddle.net/DfDet/2/

Solution 5

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

Try this out.

Custom Icons

To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

View more solutions