Use Icon via CSS Class in jQuery Mobile

Question

i want to use a icon in jQuery Mobile on a span element...and i want to support retina display too. So how can i use a icon without giving my span a fix width? Should i use Media Queries and try to get it working that way or is there any "offical way" to do it?

Regards Nils

darryn.ten · Accepted Answer · 2012-03-28 11:36:34Z

1

Here is my procedure for making custom icons in jQM.

You need 2x png's one that is 18x18 and another that is 36x36

In your css:

//non-retina
.ui-icon-amazing {
    background-image: url("custom.png");
}

//retina
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-icon-amazing {
        background-image: url("custom-hd.png");
        background-size: 18px 18px;
    }
}

To use your new icon, which you have called 'amazing' simply use the appropriate data-icon= attribute

data-icon="amazing"

and the icon will get applied.

You get bonus points for base64 encoding your png directly into your stylesheet.

answered Mar 28, 2012 at 11:36

darryn.ten

6,9933 gold badges50 silver badges67 bronze badges

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

3 Comments

Abenil Over a year ago

this is not exactly what i am looking for. i want to use my icon on a plain old span tag, and data-icon attribute doesn't apply to span tags. at least not for me.

darryn.ten Over a year ago

Here's a very dodgy example, it doesn't use the data-icon attribute but is a clone of what gets generated out of the data-icon code jsfiddle.net/zbnqW

Abenil Over a year ago

thanks...i tried ui-btn-icon all the time, but it's just the same like jQuery UI. :D

Collectives™ on Stack Overflow

Use Icon via CSS Class in jQuery Mobile

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related