commadelimited/jQuery-Mobile-Icon-Pack

Icons do not work with 1.4.2

Closed this issue · 7 comments

I saw you upgraded your icon pack, which was all that was holding me back from upgrading my jQM project to 1.4. I upgraded to 1.4.2 and wiped out the old icon pack and installed the new. However I am not seeing any icons whatsoever. I have tried Chrome, Firefox and IE. Any ideas? If I don't use Grunt all i need is the css and png fallbacks correct? thanks

@livewire1407 Are you seeing icons on the demo page? I just updated to 1.4.2 for the demo page and the icons work just fine for me in Chrome/Firefox/Opera for Mac, and IE10 for Windows 7.

i do see it, albeit the icons are mostly off center. I'll dig in to your demo page and see if I can compare it to what I'm doing and try to find the issue.

If i follow your readme and do this

Font Awesome Icon Pack Usage

Drop jqm-icon-pack-fa.css and the associated png_images folder into your project. Images are relative to the CSS file. Use them just as you would the standard icons.

and then include the jqm-icon-pack-fa.css file in my project, I see nothing.

If I remove that file, but add and include icons.data.png.css, then I see them all (very off center though).

Also, I cannot get these icons to display in anything other than white color

still in the same situation. I have looked things over several times. Any ideas?

@livewire1407 Do you perhaps have a demo page up I can inspect?

its a project that only accessible via login, I am going to email you credentials and link

Okay. Going from your email:

Open the panel, choose gyms, then click/touch on any location name and you will see a page with 9 icons. Right now they show since I have the PNGs set up. Also the logout button on the top right is one of the icons. I can't change the color of the icons using the alt class either, but I imagine that's because the PNGs are showing and not the SVG. If it's a stupid mistake I will really kick myself, as I have looked it over many times.

Is there any way you could put up an alternate page which uses the SVG icons? Alternately I could swap out the CSS files if you could tell me the path to the main CSS file.

Also, the SVG icons do have a color, but it's baked into the SVG code itself. Look at the background-image declaration. At the end of that long string you'll see fill%3D%22%23000000%22. That equates to fill="#000000". Change the values for any icon you're using and you're good to go.