When using the font awesome icons in a navbar it does not work correctly:

• The icons are placed so high above the text that its partly outside of the navbar button.
• data-iconpos does not work. The icon is always shown above the text. (and "notext" does not hide the text)

The problem has been replicated in Chrome and Firefox.

With the following code sample all icons are still displayed with text and icons above the text:

    <div data-role="footer" data-position="fixed" data-id="page-play-footer" id="page-play-footer" data-theme="e">
        <div data-role="navbar">
            <ul>
                <li><a id="btn-rew" href="#" data-icon="stop" data-iconpos="left">Back</a></li>             
                <li><a id="btn-play" href="#" data-icon="play" data-iconpos="notext">Play</a></li>
                <li><a href="#page-menu" data-icon="star" data-iconpos="notext" data-transition="slideup">more</a></li>                        
            </ul>    
        </div>
    </div>

In my page I reference the jQuery Mobile (JQM) CSS file and then the Font Awesome (FA) Icon Pack CSS file. When the icon has the same name in JQM as in FA, the JQM version is used which fails to show the retina version. However, if I change the icon to a name only available in FA, the FA version is used and the retina version shows (when @media is matched, like in iPhone 5 simulator in Xcode).

The way I understand it, FA is supposed to replace JQM icons, but this doesn't seem to be happening.

Hi,

this issue is a new reporting of pull-request #51, but with more insights. For issue-description, please visit #51.

I have seen the pull-request #54. Because of this, it came to my mind, that in my project I am using jquery-mobile-1.3.x.

So I opened your demo again - and voola, in #51 described behaviour now affects the demo, too. Screenshot is attached. See "Back" button in the header.

Buttons with data-iconpos set to top aren't rendered as they should (compared to jquery mobile).

Actual rendering of buttons
http://s12.postimage.org/i8i72awgt/bug.png
Expected rendering of buttons (without jQuery-Mobile-Icon-Pack)
http://s10.postimage.org/ozbzxm9eh/image.png

minimal Example (to get the expected result remove the icon pack css):
http://pastebin.com/FnZKCQiz

This is the css from jqm 1.1.0

.ui-icon-loading { background: url(images/ajax-loader.gif); background-size: 46px 46px; }

This is what the icon pack restores it to:

.ui-icon-loading { background-image: url("images/ajax-loader.png"); background-size: 35px 35px; border-radius: 20px 20px 20px 20px; height: 40px; width: 40px; }

Meaning no animated loader + not ligned up correctly

I have a mobile application with Apache cordova.
I added font awesome to the application and all is working fine with browser and ios version under 7, but with IOS7 the font awesome icons are correct but the rest of the icons are not displaying in correct position.

If I removed the line from the code, obviously the font awesome icons not working, but the rest of the icons function ok again

Hi!
In jquery mobile 1.3 the normal icons of jquery mobile are shifted to the top, if I include the new css file...

I am trying to figure out what is causing the RB and CB background color to be dark gray. On most of my screens I am using the default JQM color scheme instead of applying a data-theme. However if I apply a data-theme to either RB or CB the bg color is still dark gray.

Is there a style I am overlooking which causes the dark gray color? Thanks.

Also in your demo page(http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/) icons are not visible in Internet explorer 9 and 10

Hi,

thank you for this awesome icon package. I want to use it for a restaurant page and looking for an icon to represent the meals. Any chance to get a knife+fork icon?

Best,

Mike

I am using the latest release 2.1.2 and all the icon images are shifted a little off center to the right of the circle. Any ideas what might be going on?

The home icon is a little off-center to the left. Setting the background-position to -575px -0 seems to have fixed it.

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

Fontawsome custom font generated by your service works great in any Webkit browser and even in Firefox Mobile. Unfortunately the latest Opera Mobile (12.1) doesn't display fonts (tested on Android App and in Opera Emulator).

However after I generated my own custom font using Font Custom generator I got fully working icons

Looks like the solution is that fontcustom uses Bulletproof fontface with svg file attached.

P.S. Thank you for a great work!

Latest version of jQuery Mobile is 1.3.x

Is there any plan/date to support officially this version ?
The jQuery Mobile Icon Pack website mentione that it support only version 1.2.

The jquery mobile name for "menu" icon is "bars".
To mantain compability add

.ui-icon-bars { background-position: -468px -36px; }

to the bottom of jqm-icon-pack-2.0-original.css
:)

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).

Beer mug
Chain
Light bulb
Flame
Target
Shield
Key
Water drop

Many icons are positioned slightly to the left of center. This is visible when viewing the demo page in Chrome and Firefox on Windows 7.

Hi and thanks for this great tool.

I changed your css like this:
.ui-icon-info { background-position: -540px -0; }
to
.ui-icon-info { background-position: -539px -0; }

This makes the info symbol nicely centered.

Cheers, Alex

See the screenshot:
(http://imageshack.com/a/img32/8409/p6wx.png)

This was a random sampling. Not all of the icons are offset, but many are. I downloaded the icon pack using the git clone command. The screenshot was taken from the index.html file opened directly from the folder.

The screenshot was taken in Safari 6.1.2, but the icons have the same offset in Firefox 27.0.1

Just downloaded the Icon pack but all the font-awesome fonts shows a plus sign

icon color and background are hardcoded in fa css, I guess that is the default. What is the best way to apply the jqm theme colors for this icon pack?

I ran into a problem where the bars-icon from jquery mobile would disappear when I include the jquery mobile icon pack. After ... spending too much time searching for a solution, I realize the icon is called "menu" in the icon pack.

This means all buttons with data-icon="bars" will just display a +-sign unless I rename them to data-icon="menu" (in which case they don't work with vanilla jqm ).

I am using an older version of jquery mobile (1.3.1), so maybe it's not a problem in newer versions (though the api docs still say it's called "bars").

It would be nice if the mobile icon pack used the same names for the same icons as jqm.

Cheers!

Ciao Andy,

I think there is a typo at row 237 on jqm-icon-pack-2.1.2-fa.css:

.ui-icon-faforward:before { content: "\f04e"; }

should be

.ui-icon-forward:before { content: "\f04e"; }

Notice how I dont see a check mark in the box. Am I doing it wrong?
unchecked:

checked

Please see image below

This icon pack is really cool! Can you please specify what license you're sharing it under? MIT would be great. :)

Fix for ui-navbar with icons not on top.
Fix for .ui-controlgroup-horizontal with buttons with data-iconpos="notext"

.ui-navbar[data-iconpos="top"] .ui-icon {
margin-top: 0 !important;
}

.ui-controlgroup-horizontal .ui-btn-icon-notext{
margin: 3px -1px 0 0 !important;
}
.ui-controlgroup-horizontal .ui-btn-icon-notext .ui-btn-inner .ui-icon{
top: 0px;
left: 0px;
}

When I use the builder to have a smaller icon pack, the icons are displayed in black instead of white, which make them nearly invisible with jquerymobile 1.4 theme b.

Everything is ok when using the full pack.

This issue is visible also in the index.html generated in the custom icon pack. (more visible after adding data-theme="b" to a anchor line)

I think buttons lost their extra markup so icons are not working anymore with the latest jQueryMobile 1.4.0

Your git clone command in the Readme git clone [email protected]:commadelimited/jQuery-Mobile-Icon-Pack.git didn't work for me:

Warning: Permanently added the RSA host key for IP address '192.30.252.129' to the list of known hosts.
Permission denied (publickey).
fatal: The remote end hung up unexpectedly

Using the standard git clone https://github.com/commadelimited/jQuery-Mobile-Icon-Pack.git did work instead.

Adding this to a button appears to place a -10px margin on the icon resulting in a off center icon.

The icons are built, so they er placed left in the 16 x 16 pixels. This goes for both png and svg. They should be centered.

Check out "angle-right" on this page:
http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/

Is this not supported? When I add jqm-icon-pack-fa.css I have both disc and shadow with icon. When I remove it and use a standard icon I have no disc and no shadow.

Thanks.

Are alt icons supported for the original icon set? I see them defined, but when I add the class to a data-role="button" element, it's not appearing correctly for me (and when I add it to your original example page it also causes issues)

Hi,

using this theme I recognized some icons to be displaced in firefox-mobile[1] and chrome-mobile[2](Android 4.2.2). Default-Android-Browser and Safari on iPhone4 work fine.

It seems to me that only icons are displaced, which are already in jquery-mobile-default-icons. Displaced icons I see are: arrow-r, chat, plus, minus, radio-on.

The reason seems to be the overwriting of
.ui-icon:not(.ui-icon-loading),.ui-icon-searchfield:after {
background: #666666;
background: rgba(0, 0, 0, 0.4);
}
in jqm-icon-pack-fa.css. Removing this entries fixes the displacement, but in this case the "icon-plus" is displayed beyond the icons from this icon-pack.

You can find my usecase on http://www.bestellbaer.de/app/guest/mobile/order/orderPoint.xhtml?orderPointId=6, just call this site with one of the mentioned browsers.

[1] Cant get any specific information from the app itself, installed is: https://play.google.com/store/apps/details?id=org.mozilla.firefox
[2] Chrome 28.0.1500.94, Webkit 537.16, JS V8 3.18.5.10

I have the next problem with assets + jqm-icon-pack-1.1.1:

/home/davidm/Documentos/Devel/git/mobile/app/assets/stylesheets/jqm-icon-pack-1.1.1-fa.css has a invalid UTF-8 byte sequence

I have fixed with:

iconv -f UTF-16 -t UTF-8 -o jqm-icon-pack-1.1.1-fa.FIXED.css jqm-icon-pack-1.1.1-fa.css

Looks to be related to this issue:
#62

Does the fix also need to be ported over to the Builder codebase?

Hi .. I'm having a problem with all buttons that have a data-iconpos='notext'.

Any ideas?

TIA
Sam

css:

<link href="Content/jquery.mobile-1.3.0.min.css" rel="stylesheet" />
    <link href="Content/font-awesome/jqm-icon-pack-3.0.0-fa.css" rel="stylesheet" />
    <link href="Content/original/jqm-icon-pack-2.0-original.css" rel="stylesheet" />

html:

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
         <button data-iconpos="notext"  data-icon="check" >
         </button>
         <button data-iconpos="notext" data-icon="delete"  act-refresh>
         </button>
 </div>

I just ran into an issue where I want to use "icon-star" from font awesome, as bundled with the jqm font pack here. However, if i use "class='ui-icon-star'", as you probably know it will grab the png file for the jqm star so I can't scale it.

Is there any easy work around for this? It'd be nice to have those FA icons that collide with JQM icons available, perhaps with another name (class='ui-fa-icon-star' or something).

icon are not well centered, they seem to be one or 2 pixels at left from the center

jqm-icon-pack-3.0.0-fa.scss contains patch by a0801c2.
But, jqm-icon-pack-3.0.0-fa.css does NOT contain it.

As a result, jqm-icon-pack-3.0.0-fa.css has a problem to switch background-image with retina display.

Please recreate css file from scss.

Hi Matt,

posting the screenshot you asked for here too http://www.abload.de/image.php?img=winxmdvz.jpg

Best,

Mike

When nav bar icons are set to the top they are partially visible when used Font Awesome Icon Pack Usage.

Please find the screen shot below.

other custom icons are looking OK for me.

Thanks for the great icons and hope there will be a fix for it.

I have not tested this on a "retina-display" of an iPhone (4[s],5) but my Galaxy Nexus GSM with Android 4.1.2 has a 315PPI display and with -webkit-min-device-pixel-ratio: 1.3 it is caught by the Media query. Needless to say, when using unmodified versions of this CSS, I cannot not for the life of me get my Nexus to display the HD icons.

I tried playing with the pixel ratios in the media queries with no success. I replaced it with my own Media query from a LESS CSS mixin I use which catches lower density displays that are just barely what you would call "retina".

This still didn't work so I busted out Remote Chrome Dev Tools using Chrome for Android on my phone and to my surprise, it was not actually using the background-image url of the HD icons, but actually using the SD version and still following the background-size of the Media query.

I added an !important to the HD set and presto! Now, I know adding !important is bad-form and frowned upon but in this case it is a hack that works for now without further investigation. I will submit a pull request with my changes (my first pull so please give me feedback!)

After integrating your updates into my app I found the following issue: Lists that have split icons do not show the icons correctly.

To re-create the bug, add this to your /font-awesome/index.html page:

                     <ul data-role="listview" data-theme="c" data-split-icon="road">
                        <li><a href="#">foo</a><a href="#">ok</a></li>
                     </ul>

You will see the icon is hiding off to the lower left hand of the circle.
I was able to fix my issue by commenting out line 18 of the fontawesome.css

.ui-icon::before {
margin-left: 3px;
}

seems to offset the grid icon when used in google chrome 19. Firefox (latest) worked fine with that rule. Disabling it in chrome makes the grid icon line up correctly.

Hello,
The default icon is not visible when displayed in the Nexus 4.
With remote debugging I can turn off the icons "images/icons-36-white-pack.png" then the icons are visible again.

referencing the icon pack css, the "loading" dialog that appears using $.mobile.showPageLoadingMsg() appears with a broken image