How to use icons in jQuery Mobile Framework (without using a button)

Question

I am looking to use the delete icon that is built-in to jQuery Mobile.

I know how to use buttons, you just use data-role - but I want to use it inside a plain old span or div.

Is there a way to do this?

Thanks

Answer 1

Just upgraded to JQuery Mobile 1.4.0 -- Uh!... Nothing worked, until the following work-around:

<span class="ui-icon-delete ui-btn-icon-left " style="position:relative;" />

Note the class ui-btn-icon-left (you could use other ones -right, -top, -bottom, -notext, but this one seems to work the best). Most importantly, the style="position:relative" finally placed it within my container.

Happy coding...

Answer 2

You can just use a div with the classes specified, for example

<div class="ui-icon ui-icon-delete"></div>

Update:

The style-sheets for JQM have changed since this was first posted, you can get the same affect by adding the ui-btn-icon-notext class to your element (at least as of JQM 1.4.5). Additionally you might need to add a position:relative; to get it positioned correctly.

For example

  <span class="ui-btn-icon-notext ui-icon-delete" style="position:relative" />

Here's a link to the relevant API