Question

I’m having a strange issue where if I view my website on a desktop computer the icons that come with a theme-roller zip file show up just fine but when the website is viewed on a mobile device (so far I’ve only tested an android device using both chrome and the built in browser and an ipod touch) the icons refuse to show. I just get an empty circle where the icon should be. The icons image files are in a folder called ‘images’ that is in the same directory as css file so I don’t think it’s a pathing issue. Just to be clear, it happens everywhere that jquery mobile should be showing an icon, not in just one or two places. For instance with a collapsible list, jquery mobile is supposed to show a plus icon when the section is collapsed and a minus icon when it’s expanded etc.

Please help!

Thanks

EDIT:
So I took it upon myself to set up remote debugging in Chrome on my mobile device and it appears that the problem is that for some reason, only on mobile devices, the css or js is telling the browser to use the white icon set as opposed to the black icon set. The white icons don’t seem to be appearing because they are on a white background. Anyone have any idea why on a desktop browser it would use one color of icons and on a mobile browser it would use another?

Answer 1

in the css, just change

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

by

background-image: url(./images/icons-36-black.png);

In the HD/”retina” sprite section (around line 485 in lmy theme, not sure it is the same for everyone).