Icons squished on iPhone and Android devices #25

Closed
hamx0r opened this Issue Oct 17, 2012 · 9 comments

Projects

None yet

3 participants

@hamx0r
hamx0r commented Oct 17, 2012

I can test my mobile site in Chrome under Windows, Mac and Linux, and the Font Awesome icons look, well, awesome. Once I pull up the same page in my mobile browser (the stock browser on Android or stock Safari on iPhone) the icons which are specifically non-stock jQuery Mobile look squished as if the browser is forcing 3 icons to take the space of 1.

Screen shot here

You can see the site here: http://test.contracktor.com/mobile
Login with "411" for both the user and password. You can see some of the icons look strange on mobile devices, but fine on desktop browsers. I just (15 mins ago) updated to the latest FA icon pack.

UPDATE 1: This problem only appears on mobile devices when trying to use jQuery Mobile icons with the FA icon pack installed. If I exclusively use FA icons, then they look fine.

UPDATE 2: The checkbox graphic for a normal input checkbox also looks squished when viewed on a mobile device. It looks fine when viewing the mobile page on a desktop browsers. One can recreate issue by commenting out the icon pack CSS then observe the checkbox inputs looking correct. Using the URL and account above, one can click "Test Job" then the "Task" then then "Edit Task" button. The resulting page has a checkbox.

UPDATE 3: Default listview icons also squished when viewed on mobile devices (the "cheveron-right" type icon for example).

@ghost
ghost commented Dec 18, 2012

Hi, hamx0r,

Did you ever find a workaround for this? I'm having the same trouble.

Additional datapoint: this only happens if I'm using a theme created using the JQM ThemeRoller, not if I'm using the stock JQM theme. It looks like you're using a custom theme too.

@ghost
ghost commented Dec 18, 2012

Screenshots below:

Using standard theme:

http://games.contraterrene.com/screenshots/standard_theme.png

The home icon appears normal using the standard theme.

Using ThemeRoller theme:

http://games.contraterrene.com/screenshots/custom_theme.png

The home icon is squished to the top, and the wrench icon also appears. There are only two icons squeezed in on this screenshot, but some of the icons cause three to be displayed (just as shown on hamx0r's screenshot).

@hamx0r
hamx0r commented Dec 19, 2012

Hi There,

The workaround was to use the icon pack's name for the icon instead of the
JQM native name. so insead of (im going based on memory here) icon-plus
youd use icon-fa-plus (for the Font Awesome pack). the proble seems to
come from mixing names from different packs. all of the native icons
appear to be in the FA pack under a different name.
hope that helps!
jason

On Tue, Dec 18, 2012 at 4:23 AM, Tony Hursh notifications@github.comwrote:

Screenshots below:

Using standard theme:

http://games.contraterrene.com/screenshots/standard_theme.png

The home icon appears normal using the standard theme.

Using ThemeRoller theme:

http://games.contraterrene.com/screenshots/custom_theme.png

The home icon is squished to the top, and the wrench icon also appears.
There are only two icons squeezed in on this screenshot, but some of the
icons cause three to be displayed (just as shown on hamx0r's screenshot).


Reply to this email directly or view it on GitHubhttps://github.com/commadelimited/jQuery-Mobile-Icon-Pack/issues/25#issuecomment-11472491.

@ghost
ghost commented Dec 20, 2012

Thanks! I'll give it a try.

@hamx0r
hamx0r commented Dec 20, 2012

Hi Tony

The workaround for me was to use the icon pack names for the native icons.
I'm not by my code now, but if the normal JQM name was "icon-plus" and the
icon pack/font awesome name for the same looking icon is "icon-fa-add" then
use "icon-fa-add". it seems all the native icons show up in the FA pack
under different names, and the weird icon squishing happens when trying to
use the native names instead of the FA names.

hope this helps!

jason

On Tuesday, December 18, 2012, Tony Hursh wrote:

Screenshots below:

Using standard theme:

http://games.contraterrene.com/screenshots/standard_theme.png

The home icon appears normal using the standard theme.

Using ThemeRoller theme:

http://games.contraterrene.com/screenshots/custom_theme.png

The home icon is squished to the top, and the wrench icon also appears.
There are only two icons squeezed in on this screenshot, but some of the
icons cause three to be displayed (just as shown on hamx0r's screenshot).


Reply to this email directly or view it on GitHubhttps://github.com/commadelimited/jQuery-Mobile-Icon-Pack/issues/25#issuecomment-11472491.

@ghost
ghost commented Dec 25, 2012

Seems to work fine. Thanks!

@hamx0r
hamx0r commented Dec 26, 2012

sure thing! glad to help!

On Tue, Dec 25, 2012 at 7:00 PM, Tony Hursh notifications@github.comwrote:

Seems to work fine. Thanks!


Reply to this email directly or view it on GitHubhttps://github.com/commadelimited/jQuery-Mobile-Icon-Pack/issues/25#issuecomment-11675031.

@dstarsboy

Great work around for the button icons but that doesn't fix the issue with the listview and check box icons. Does anyone have a more comprehensive fix for this?

@dstarsboy

Ah, there is an easy fix for this here.

http://stackoverflow.com/questions/14160716/jquery-mobile-icon-pack-squished-on-iphone

Simply make sure your FA Icon CSS file is declared after your custom theme.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment