jquery mobile data-icon not appearing on a mobile device

I have a mobile web application (.NET MVC) and I'm using JQuery Mobile (beta 3 & jQuery 1.6.3). My question is regarding the attribute 'data-icon' on various elements. For example, I have an element:

<a href="@Url.Action("Index", "Home")" data-icon="home" data-iconpos="notext">Home</a>

When I run the application locally, everything appears as expected. There is a small circular button with the 'home' image inside. When I deploy my application to my host (Arvixe), this same button renders as expected in Chrome, but does not render as expected on my mobile phone (Nexus One). On my phone, the home icon image does not appear at all.

JQuery mobile is ref开发者_开发百科erencing the image sprites in the following manner:

background-image:url(images/icons-18-white.png);

I can verify this image does in fact exist in the proper location, as it appears on the desktop browser, I can get to it with a URL (Desktop and Mobile) and my host log shows that requests to that URL are coming back with a 200 response. I have even connected my web application, while hosted to a weinre server, and I can verify the DOM element does have the correct image path. What's even stranger, is that when I go to jquerymobile.com on my phone, the same icons appear, the problem seems isolated to my hosted site.

Is there something I'm overlooking? Thanks.

---

I think I may have solved this. When upgrading from jQuery mobile beta 2 to 3, I did not upgrade the corresponding images as well. Grabbing the updated images seems to have done the trick.

---

Plese place your images folder (which will come from jquery-mobile downloaded zip file) along with your css files.

Ex: If you have copied the .css files to some location named

d:\project\styles\jquery.mobile-1.x.x.css

Then please place the images folder as show below

d:\projects\styles\images

---

you need to set data-role="button" on anchors for them to appear as buttons with jQM (jQuery Mobile). see here

<a href="#" data-role="button" data-icon="home" data-iconpos="notext">Home</a>

this is the only thing I can think of.

---

The latest jquerymobile has fixed this issue. If not, you need to check the following steps.

• check images folder of jquerymobile and jquerymobile CSS are in the same directory
• If you put jquerymobile CSS in separate folder, you need to change "path" in this stylesheet