andyMatthews.net

Hi Andy
Looking forward to using these. I downloaded the zip from github, copied over the files, referenced the css in my html head.
Yes, the new font awesome icons where shown.
But not the old ones anymore (your jQuery Mobile Icon Pack).
As some of the icons I use exist only in that (for instance wrench) I would have to use both.
Did I make a mistake or is it not possible to use both at the same time?
Cheers
Alex

Alex - April 04, 2012 02:32 pm

hello Andy Matthews,
Need some help Regarding Phonegap /jquery mobile/sqlite

>>>>>Database connectivity with sqlite, csv parsing in jquery etc

Please provide me some help for same

Anurag Gautam - April 05, 2012 10:56 am

Hi Andy,

from Niagara region Canada

Bob Seabrook - April 08, 2012 08:20 am

The 1.1.0 update doesn't display the icons correctly on the default footer navbars (the negative margin causes unwanted displacement at the top of each button.)
http://jquerymobile.com/demos/1.1.0/docs/toolbars/docs-navbar.html

Add this to the CSS:
.ui-btn-icon-top .ui-icon {margin-top:0 !important;}

James Moberg - April 16, 2012 10:34 am

Thanks for this icon pack. Unfortunately I was looking for a icon pack that contains arrows pointing NE,SE,NW,SW directions. Please consider adding these to your nex ticon pack.

Thanks

John - May 02, 2012 02:00 pm

Good call John. Technically you could accomplish this using the N S E W icons by combining them with CSS transforms.

Add this declaration to a CSS file being used by your app:

.ui-icon-arrow-left::before {
-webkit-transform: rotate(45deg);
}

You'll probably have to tweak the positioning slightly but that'll do it for you.

andy matthews - May 03, 2012 07:36 pm

Hi, your icons don't display on my Google Android phone or old iphone. e.g. I use the page: http://www.andymatthews.net/code/jQuery-Mobile-Icon-Pack/font-awesome/ for testing.
It works fine on a browser. Any ideas? Thanks.

Sydney Brendon - May 10, 2012 01:28 am

Should add some sort of icon for a save button -- currently just using the check mark.

Chris V - May 17, 2012 07:14 pm

There is a problem with splitview lists and the icons -- see here for what it looks like:
http://i.imgur.com/mC7tZ.png

Code:

• testDelete


• testDelete

Chris V. - May 17, 2012 07:48 pm

Andy -- thanks for getting back to me. I actually started using this last night and noticed the bug right after, so I'm using version 8f142a5 (I believe that's the last commit when I downloaded).
Here's a bit of a redacted example of what's going on: http://kappasigmaisu.com/static/m/test/splitviewlist.html
I'm using Chrome 19 -- looking forward to your response. Thanks

Chris V - May 18, 2012 08:40 am

Andy -- it also looks like somehow the default radio button selector icon is broken: http://i.imgur.com/u0O1v.png Any ideas?

Chris V - May 18, 2012 09:47 am

Hi Andy,

Firstly, many thanks for your jQuery contributions. Kudos.

I have a small issue with the icon pack (non-Font Awesome). Checkboxes are appear to have their default data-theme overridden and appear black, not blue.

Removing the css reference to the mobile icon pack restores the correct theme.

Has anyone else encountered this and/or have a fix?

Regards,

Chris - May 24, 2012 08:10 am

Andy,

Thanks for the quick response. Just tested and the checkbox is now working perfectly. Haven't tested radio input (not used on current project) but will mock one up to confirm this is ok too.

Thanks again for your help.

Regards,

Chris - May 26, 2012 09:06 am

Nice work Andy!

Alex Paredes - June 08, 2012 09:54 am

Hello Andy,

first of all thanks for your great work. The additional icons are really nice. But if I user the font-awesome icons, none of the default jquery mobile icons are working anymore. For example the close button in the dialog header is missing. Any help for this?

Florian - June 11, 2012 10:34 am

Hi Andy,

thank you for these cool icons. Im creating a page where i want to use collapsible content with your icons

Regarding http://jquerymobile.com/test/docs/content/content-collapsible.html custom icons can be used like this:

data-collapsed-icon="arrow-r" and data-expanded-icon="arrow-d"

At http://mobfun.de/noa/ this is not working with your icons while the home and map button for the header are working fine. Any idea?

Best,

Mike

mike - June 13, 2012 04:18 am

argh, how i did get there? /o\

Thanks for clarifiying

mike - June 13, 2012 05:43 am

Hi Andy, the font awesome icons do not work on my droid bionic. they just render as the missing character rectangles.

They look awesome on other devices, but I wont be able to use them if they don't work on the droid.

Your help would be greatly appreciated.

tion - June 19, 2012 04:28 pm

Hi Andy,


like Florian I am also having problems with this overriding the default icons, specifically.

If i wanted to use data-filter="true" on a "listview", how do I get the data-icon="search" to show up.

Currently it appears blank

Kenji - June 19, 2012 05:55 pm

@andy

here is a sample page.

http://www.startyabastard.com/app/lubeguide.html

as you can see the back button is working
but I'm not sure how to manipulate the search icon for the filter

Thanks,

Kenji - June 19, 2012 09:59 pm

Andy,
I have exactly the same issue as stated above. I have made a load of changes to the jqm-icon-pack-2.0-fa.css file to copy certain icons to arrow-r and a number of others for radio-on etc but this seems to contradict the statement that these icons should allow use of the old as they just do not show up. I came to a stumbling block with the search field as shown on Keni's link above. I can post another site but it is exactly the same problem as above.

BTW: These icons are fantastic and today I am working with your autocomplete functions so thanks heaps for your efforts.

PS: I have made some minor updates to the icon positions in the css file if you want these to come back to the base. Let me know I have git.

David - June 20, 2012 06:51 pm

Hi Andy

Nice work - looks good except for the problem with split buttons.

Here is my solution to this if you're interested (based on 2.1 commit 01bdf92d56):

.ui-li-link-alt .ui-btn-inner { padding-top:1px; }
.ui-li-link-alt .ui-btn .ui-icon { position:static; }

Can't guarantee it?ll work for all icons, but it works for my site, and for the link test/delete given above by Chris V on May 18.

Simon - June 26, 2012 04:09 am

Andy, Did you make any progress on this problem:
FA icons overrides the existing icons

Thanks

Steven Benjamin - July 08, 2012 09:51 am

Fulll que bueno

Carlos - July 16, 2012 10:01 am

Font seems to be not imported on windows phones. It displays a rectangle instead.

Cedric - July 23, 2012 09:37 am

Andy, it's not the same problem. On Lumia 800 / windows phone 7.5, The position seems to be good. When i use a classic character no problem, but characters as \f077 no way ...

Cedric - July 24, 2012 08:17 am

Same here with windows phone of a friend. Original icons fine but icon pack ones not.

mike - July 25, 2012 05:34 am

yes, the problem is in your demo too. The rectangle is on each icon slot but for a few of them we can however see the image behind : icons "music", "heart", "trash", "play", "pause", "stop", "phone", "wrench"

Cédric - July 25, 2012 06:20 am

There is the same problem on original font page. Do you want screenshot ? How can i post it ?

Cédric - July 25, 2012 06:46 am

yes, it seems some icons are working
http://www.abload.de/image.php?img=winxmdvz.jpg

mike - August 03, 2012 02:16 pm

Hi Andy,

I am trying to implement the fa icons and have a slightly different problem - how can I retain the jQM default icons meaning use the fa icons on top of the default instead of overwriting them?

The reason is the default icons of jQM look more crisp on my iPhone.. But the FA looks awesome indeed.

so, if I can do default jQM + FA then it will be excellent.

Thanks for your help!

Sam - August 18, 2012 02:18 pm

Hi Andy,

I made a bit of re-arrangement of the FA CSS definitions to un-blur the jQM icons on my iPhone (retina) and re-align some of the FA icons I use while keeping everything intact.

http://www.aspplayground.net/document/jquery.mobile-icon-pack-2.1.2-fa.css

Sam - August 18, 2012 07:51 pm

Hi,

I am using your jqm-icon-pack 2.1.2 for my jquery mobile project. Its working very nice, but after installing icon pack, it's overriding the check-box and radio button's background to dark grey. Checked check-box of jqm not taking its default blue theme.

I added screenshot in below link, for your reference.

http://i.imgur.com/g06YU.png

Please reply, how to fix this?

Thanks...

Subha M - August 22, 2012 03:12 am

Hi,

Thanks for your reply

Our website address is,

http://www.notezilla.net

By opening above link, in sign-in page you may find that stay signed in check-box with dark grey background. we are facing this issue after installing jqm-icon-pack.

Thanks...

Subha M - August 22, 2012 11:16 pm

I forgot to mention that we are using JQM 1.2.0 Alpha version.

Thanks...

Subha M - August 24, 2012 03:35 am

Awesome article! Thanks!

ITguy - September 03, 2012 12:19 am

Hello, Do you have any solution for the Windows Phone problem yet? I have same problems as Cedrik and Mike has with windows phone. Tested by Nokia Lumia 700 and windows phone 7.5.

Tero - September 05, 2012 06:08 am

Do you happen to have your original additional icons in a vector format?

Paul - September 06, 2012 02:49 pm

Awesome! Thanks Andy.

Paul - September 08, 2012 06:24 pm

Hi Andy! For me, the Font Awesome icons are not displayed in the center of the circle. I saw a commit-comment about this 6 months ago. Did this problem sneak in again in the latest release or am I doing something wrong? Thanks

Lennart - October 12, 2012 05:21 am

Hi Andy,

I am facing problem with Font Awesome icons in IE-8 and IE-7. In IE-8, icons are combined with plus sign, whereas in IE-7 all icons were replaced by plus.

I then, checked your website in IE-8 & IE-7, there also i am facing same problem.

I added screen shot of your website here, for your reference. Please check and reply how to fix this problem.

http://i.imgur.com/VFwdY.png (IE-8)

http://i.imgur.com/bRhKv.png (IE-7)

Thanks...

Subha M - October 12, 2012 11:23 pm

Dear Andy,

I found that solution of Github issue #6 (line 18 on css file) break buttons in control group in JQM version 1.2. For example it breaks in following:

Dharam Paul - October 15, 2012 08:10 pm

Further to my last comment, here I what I mean:
JQM version 1.1 (http://m.punjabichowk.com)
JQM version 1.2 (http://m4.punjabichowk.com, after removing line 18 from your css)

Regards
Dharam

Dharam Paul - October 15, 2012 08:14 pm

Hey Andy, I am not able to get the icons to display - hoping you can point me in the correct direction.

I've added the jqm-icon-pack-2.1.2-fa.css to my html header. I've added all of the fontawesome files to the images folder. I call them with the following format: data-icon="envelope"

I am only getting the default jqm icons -I know it's something very simple I am missing.

Great work on the icons, much appreciated!

Rach - October 26, 2012 07:25 am

Hi,

Do you have any suggestion to my question on October 12th about font-awesome icon problem in IE-8 and IE-7?


Thank you,
Subha

Subha M - November 11, 2012 10:39 pm

I'm still looking for a solution to a previously asked question. With the input type = search, the search icon does not show when I reference the jqm-icon-pack-2.1.2-fa.css. If I remove the reference it shows up fine but my other Font Awesome icons obviously don't show. I've tried referencing the css files in different orders but that doesn't help. This is really frustrating and I'm hoping you can help. They need to play nice together. Thanks in advance for your help!

Darrell - November 21, 2012 10:52 am

Hi

Thanks for your reply...

Subha M - November 23, 2012 01:19 am

Hi Andy,

Any chance you upgrade the css to use the latest Font Awesome 3.01?

Samuel - January 14, 2013 04:37 pm

great! thanks andy for your work. the new project sound exciting..

I fixed a few things (alignment and css in general) in the css and converted the sass to a less file. do you want a copy of that?

I am not familiar with github though.

Samuel - January 16, 2013 06:28 am

I know this is an old post, however, I'm new to fontawesome and actually used it on my bootstrap theme that I recently designed. Unfortunately, it is not rendered well on mobile views, they just form a square icon. Any idea how to fix this? any tweak for this? or perhaps, do you guys know an alternative font icon that we can use for mobile device?

Joe - April 27, 2013 10:28 pm