O'Reilly logo

jQuery Mobile Web Development Essentials Second Edition 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 are several image files (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 percent or so, and you should see something very similar to the following screenshot: ...

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