This recipe shows you how to replace the default icon sprite provided with jQuery Mobile and use your own instead. The custom icon sprite used here contains icons which form the six faces of a dice.
Copy the full code of this recipe from the code/04/replace-icon-sprite
sources folder. You can launch this code using the URL http://localhost:8080/04/replace-icon-sprite/main.html
.
In this recipe, the following image, dice.png
is an icon sprite with six icons for the six faces of a dice. This icon sprite is used to replace the default icon sprite.
Create a new stylesheet
jqm-sprite.css
and redefine the default.ui-icon
class available with jQuery Mobile framework. Replace the default icon classes with new classes for the icons derived from the custom icon sprite as shown in the following code:.ui-icon { background: #fff; background: rgba(0,0,0,.4); background-image: url("../../resources/images/dice.png"); background-repeat:...