JQuery Mobile Icons Won't Load - Unless I Use the CDN

2
votes

I'm working on my first PhoneGap app with JQuery Mobile and I've having a problem getting the included icons to show.

When I reference a local instance of the .css file, like so:

link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />

I don't get any icons. Just dark circles. I can see that the css is loading, because if I throw in a bogus path the results don't look like JQuery Mobile at all.

But when I reference a CDN, like so:

link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />

I get nice buttons, no problems. I'm using Firefox to view output, but builds all the way onto an Android device show the same symptoms.

I'd punt and use the CDN, but I'm under the impression that if I want the app to run disconnected, then I should just include the .CSS file.

I've double checked my local CSS and downloaded it a second time, but no change. Anyone seen anything similar?

2
jquery-mobilecordova

2 Answers

7
votes

Make sure you have the jQuery Mobile images directory in the same directory as jquery.mobile-1.0.1.min.css.

0
votes

I've just started with PhoneGap and had the same issue with JQuery Mobile.

Once I added the images under the www folder, I set the Build Action for each image to "Content." By default, mine were set to "Resource."

After this, the images appeared in my Windows Phone Emulator.

Hope this helps.

Chuck