O'Reilly logo

jQuery Mobile Web Development Essentials by Andy Matthews, Raymond Camden

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

Creating and using custom icons

We've seen how easy it is to add our own theme to jQuery Mobile using ThemeRoller. Now we're going to add a little more spice to our Notekeeper application by creating a custom icon. The directions in this section will be specific to Photoshop but any graphics application capable of exporting transparent PNG files should be acceptable.

CSS Sprites

Before we create and use an icon, we should first understand how jQuery Mobile uses icons and applies them. In the theme you just created there are several image files present (themes/images). Open icons-18-black.png, and icons-36-black.png in the graphics editor of your choice. Zoom in on both of them to 400% or so and you should see something very similar to the following ...

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