The jQuery Mobile framework uses a default icon sprite and derives all the icons from it. This recipe shows you how to add a custom icon sprite, with the divide and equals icons, to the default standard icon set, together forming the keys of a calculator. The standard icon set already has the plus, minus, and delete (multiply) icons.
Copy the full code of this recipe from the code/04/add-icon-sprite
sources folder. You can launch this code using the URL http://localhost:8080/04/add-icon-sprite/main.html
.
In this recipe, the following image, calc-sprite.png
provides the divide and equals icons:
Create a new
jqm-sprite.css
stylesheet and define the classes.ui-icon-divide
and.ui-icon-equals
for the new icons derived from the custom icon sprite:.ui-icon-divide, .ui-icon-equals { background: #fff; background: rgba(0,0,0,.4); background-image: url("../../resources/images/calc-sprite.png"); background-repeat: no-repeat; -moz-border...