commadelimited / jquery-mobile-icon-pack Goto Github PK
View Code? Open in Web Editor NEWExtending the default jQuery Mobile icons
Home Page: http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/
License: GNU General Public License v2.0
Extending the default jQuery Mobile icons
Home Page: http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/
License: GNU General Public License v2.0
Also in your demo page(http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/) icons are not visible in Internet explorer 9 and 10
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
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).
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 .. 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>
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.
When using the font awesome icons in a navbar it does not work correctly:
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>
Beer mug
Chain
Light bulb
Flame
Target
Shield
Key
Water drop
referencing the icon pack css, the "loading" dialog that appears using $.mobile.showPageLoadingMsg() appears with a broken image
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/
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.
icon are not well centered, they seem to be one or 2 pixels at left from the center
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)
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.
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
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
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.
Adding this to a button appears to place a -10px margin on the icon resulting in a off center icon.
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!
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.
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.
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)
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;
}
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!
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?
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.
The home icon is a little off-center to the left. Setting the background-position to -575px -0 seems to have fixed it.
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
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
This icon pack is really cool! Can you please specify what license you're sharing it under? MIT would be great. :)
Hi Matt,
posting the screenshot you asked for here too http://www.abload.de/image.php?img=winxmdvz.jpg
Best,
Mike
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 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,
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
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 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
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"; }
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!)
Looks to be related to this issue:
#62
Does the fix also need to be ported over to the Builder codebase?
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
I think buttons lost their extra markup so icons are not working anymore with the latest jQueryMobile 1.4.0
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.
.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.
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).
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
:)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.