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

What have you tried so far? Have you tried to just change-out an <a /> tag for a <span /> tag? jsfiddle.net/rUPxQ/1 — Jasper
– Jasper, Commented Sep 20, 2012 at 1:00

Roman · Accepted Answer · 2014-01-03 22:28:11Z

14

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

edited Jan 3, 2014 at 22:28

answered Dec 30, 2013 at 23:08

Roman

6511 gold badge13 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TrueEddie Over a year ago

Thanks! I'm also using 1.4.0 and was have trouble figuring this out.

Jack · Accepted Answer · 2015-06-16 13:22:29Z

11

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

edited Jun 16, 2015 at 13:22

answered Sep 20, 2012 at 14:42

Jack

11k13 gold badges52 silver badges65 bronze badges

4 Comments

Jack Over a year ago

@Haseeb I posted this for an earlier version of JQM, I updated my answer with an example for the current version.

ehrhardt Over a year ago

style='position:relative' is important as Roman answered below

Jack Over a year ago

@ehrhardt perhaps, but at the time I guess it wasn't necessary. I answered this question in 2012.

Jack Over a year ago

@ehrhardt At any rate, I've updated my answer to include that information. Thanks for pointing it out.

Roman · Accepted Answer · 2013-12-21 03:00:18Z

0

How about using <span class="ui-icon ui-icon-delete ui-icon-shadow" style="display:block" /> or simply referenceing the ui-icon-delete class in your markup?

edited Dec 21, 2013 at 3:00

Roman

6511 gold badge13 silver badges14 bronze badges

answered Sep 19, 2012 at 22:14

RonnieT

2,2134 gold badges33 silver badges44 bronze badges

1 Comment

James Over a year ago

thanks but this doesnt seem to do anything. I know in regular jquery you can do that, but it doesnt work on mobile

Primož Klemenšek · Accepted Answer · 2014-05-26 09:11:06Z

0

add data-iconpos="notext"

Icon positioning:

http://demos.jquerymobile.com/1.1.2/docs/buttons/buttons-icons.html

answered May 26, 2014 at 9:11

Primož Klemenšek

1711 silver badge4 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related