jQuery Mobile icons where do I find them?

Question

I am using jQuery Mobile for the first time.

I have the following code:

<a href="index.html" data-role="button" data-icon="delete">Delete</a> 

Which I got from this site. But it is not changing the icon to the delete icon, just a dark circle with a light circle behind it.

Do I have to download the icons separately? if yes, where can I find them?

Answer 1

If you are hosting the CSS style-sheet for jQuery Mobile then you need to also host the images (which are found in the same .zip file that the JS and CSS files came in).

The image sprites should be in a directory named images which is in the same directory as the jQuery Mobile CSS style-sheet (the style-sheet relatively references the images like this: background-image: url(images/icons-18-white.png);).

Alternatively if you link to the CDN hosted CSS style-sheet then you don't have to host the images.

Here are the CDN hosted jQuery Mobile 1.0 files:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

Source: http://jquerymobile.com/download/

Answer 2

You can download the themes from github for example: https://github.com/jquery/jquery-mobile

The files should be in css/themes/*theme*/images/