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

Answer 1

Here is my procedure for making custom icons in jQM.

You need 2x png’s one that is 18×18 and another that is 36×36

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.