Question

I am working on an application with JQuery Mobile. I need to use a custom image in a button that is used in a header bar. I’m not sure how to use a custom image though. I’ve reviewed the documentation found here: http://jquerymobile.com/demos/1.0.1/docs/toolbars/docs-headers.html.

My custom image is located at “/imgs/header/custom.png”. How do I use this image in a button in the header of a JQuery Mobile application?

Thank you!

Answer 1

If you mean that you want to use a custom icon then you can do this:

CSS —

.ui-icon-custom {
    background-image: url(/imgs/header/custom.png) !important;
}

HTML —

<a data-icon="custom" href="#">Custom</a>

Source: http://jquerymobile.com/demos/1.0.1/docs/buttons/buttons-icons.html (the bottom of the page)