Note: Update to jQM 1.4 recommended
After using jQuery Mobile 1.4 for some time now, I would defenitely recommend to upgrade to this new version providing a good build in icon support.
The jQuery Mobile Icon Pack provided by Andy Matthews is a widely used icon pack replacing the default jQuery Mobile icons with enhanced Font Awesome icons. These icons allow for higher quality then default icons (jQuery Mobile version < 1.4). However, this icon pack was created before iOS 7 has been released. Meanwhile Apple makes use of a higher resolution image processing. With this enhancement, there is also a change in processing CSS background size definitions in the context of media queries. As identified by Andy Crone on StackOverflow, it is required to explicitly reset the background images sizes. This must also be done for the jQuery Mobile Icon pack to make the icons work on iOS 7 devices.
To fix this, add the following css definitions to your CSS:
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx){
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info2, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on, .ui-icon-email , .ui-icon-page,
.ui-icon-question , .ui-icon-foursquare, .ui-icon-dollar , .ui-icon-euro,
.ui-icon-pound , .ui-icon-apple , .ui-icon-chat , .ui-icon-trash , .ui-icon-mappin , .ui-icon-direction,
.ui-icon-heart , .ui-icon-wrench , .ui-icon-play , .ui-icon-pause , .ui-icon-stop , .ui-icon-person , .ui-icon-music,
.ui-icon-wifi , .ui-icon-phone , .ui-icon-power ,
.ui-icon-lightning , .ui-icon-drink , .ui-icon-android {
-moz-background-size: 774px 54px;
-o-background-size: 774px 54px;
-webkit-background-size: 774px 54px;
background-size: 774px 54px;
}
.ui-icon:before { margin-left: 4px; }
}
Note that this media query has been specified for a pixel ration of 2 as used by iOS 7.