O'Reilly logo

jQuery Mobile Cookbook by Chetan K Jain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding a custom icon sprite

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.

Getting ready

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.

How to do it...

In this recipe, the following image, calc-sprite.png provides the divide and equals icons:

  1. Create a new jqm-sprite.css stylesheet and define the classes .ui-icon-divide and .ui-icon-equals ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required