mkkeck / jquery-ui-iconfont Goto Github PK
View Code? Open in Web Editor NEWIcon Font for jQuery UI » Replace PNG-icons of jQuery UI with web font
Home Page: https://mkkeck.github.io/jquery-ui-iconfont/
Icon Font for jQuery UI » Replace PNG-icons of jQuery UI with web font
Home Page: https://mkkeck.github.io/jquery-ui-iconfont/
I recommend you to publish your results in well-known repositories: npmjs, bower, nuget. You can post it additionally to two free CDNs: cdnjs and jsDelivr. All this is for free, but it can help to make results of your work more known by other people. By the way it you do the work once then creating new tag in GitHub will automatically publish new versions on many from the sources which I mention. I did the work with one my product and can explain you required steps if you would have some problem in understanding how to publish in some from described above repositories of CDNs. You can start with bower and npmjs where you need just create JSON file which is almost the same what you have already and start some command line tools. See here, here and here. You can easy to find more information in internet.
The text-indent value of the .ui-icon element (line 21) in the jquery-ui.icons.css file is set to zero. This shows the text where only the icon should show, for example the datepicker shows the words 'Prev' and 'Next' in your demo. Setting a value of text-indent: -99999px; hides the text leaving only the icon correctly showing.
I often have markup like this:
<button class="dateButton small-button">Select Date</button>
and corresponding JS like this:
local.btns.jDateButtons = $('.dateButton');
...
local.btns.jDateButtons.button({
text: false,
icons:{
primary: 'ui-icon-calendar'
}
}).off().on('click',function(){
...
});
I think I must be missing something here. The markup that contains the ... ui-icon ui-icon-calendar ...
isn't created until later and it's done by the jQuery UI button widget. So, where exactly do I put the information for the size and color of the icons?
Am I meant to add CSS like this: ??
.ui-icon.ui-icon-calendar{
font-size: 135%;
color: #00FF00;
}
How else can I target the span tag that the button widget creates for me on the fly which is where the font-size and color directives apparently need to go?
The above CSS would appear to work, but what if I have multiples of the same icons on the page and I want them to be different sizes or different colors?
Hi, your work is excellent and in the interest of making it even better for I was wondering whether you would be able to add/replace a better (IMHO) icon for the trash can? The old JQUI icon was a trash can similar to the one used in Font Awesome (http://fortawesome.github.io/Font-Awesome/icon/trash-o/) but the new icon looks like a beer glass. Every colleague I have spoken to agrees that it looks like a beer glass, and I've had to change our use of that icon for the cross icon as it didn't look goo in our shopping cart. We use a delete icon next to each item in the cart, and it looked like a stack of beer glasses :-)
I would imagine we're not alone in thinking this, so I thought perhaps it might be a worthwhile endeavour for the good of the plugin. What are your thoughts?
The left edge of the icons appears to be cut off slightly, this is particularly noticeable on the circular icons and affects the demo page. It can be seen on the button icons and on the datepicker prev/next icons (when hiding the text with text-indent, see bug #2 I logged).
As a quick fix I added padding-left: 1px; to the .ui-icon element (line 21) in the jquery-ui.icons.css file. Although this fixes the problem and you can clearly see the full icon, it does make everything a bit bigger and I doubt it's a proper fix, so thought I'd best log a bug for the issue.
Different packages planned:
It's interesting project! It's the initial version, so it's clear that it could be some bugs and problems.
For example, the resizer icon (ui-icon-gripsmall-diagonal-se
) in the Dialog (see your demo) have some problems:
position: relative
instead of position: absolute
will be used which make the wrong place of the icon.ui-resizable-se
class on the resizer div. Because of that the width
, height
, right
and bottom
from the CSS rule .ui-dialog .ui-resizable-se will be applied which makes the icon not visible.Some CSS classnames are renamed, deleted or replaced in future release.
The goal is, to make usage for you much easier and better quality.
Some tests on mobile devices and hdpi screens shows me, that the css only created icons for loading animations looks not so good. These icons and their animations are deleted:
.ui-busy-icon,
.ui-busy-icon-balls,
.ui-busy-icon-circle,
.ui-busy-icon-clock,
.ui-busy-icon-comet,
.ui-busy-icon-planet,
.ui-busy-icon-radar,
.ui-busy-icon-progress,
.ui-busy-icon-square
Following classnames are deprecated.
Loading status
Old:
.ui-loading-icon.ui-icon-balls
.ui-loading-icon.ui-icon-circle
.ui-loading-icon.ui-icon-comet
.ui-loading-icon.ui-icon-lines
.ui-loading-icon.ui-icon-planet
New:
.ui-icon-loading-status-balls
.ui-icon-loading-status-circle
.ui-icon-loading-status-comet
.ui-icon-loading-status-lines
.ui-icon-loading-status-planet
File icons
Old:
.ui-icon-file-rtf
.ui-icon-file-spreadsheet, .ui-icon-file-xls
.ui-icon-file-txt
New:
.ui-icon-file-richtext
.ui-icon-file-table
.ui-icon-file-text
The animations are reassigned to make usage more easier to understand.
Old:
.ui-animate.clockwise .ui-icon,
.ui-animate.anti-clockwise .ui-icon,
.ui-animate.bounce .ui-icon,
.ui-animate.bounce-reverse /* <-- this was useless */
New:
[class^='ui-icon-'].rotate, /* <-- clockwise */
[class*=' ui-icon-'].rotate,
[class^='ui-icon-'].rotate-reverse, /* <-- anti clockwise */
[class*=' ui-icon-'].rotate-reverse,
[class^='ui-icon-'].bounce,
[class*=' ui-icon-'].bounce
i could solve it with this workround :
,ui-resizable-se {position:absolute !important}
Just like the "i" for info it could be nice with some icons typically used for text-formating. But right now i'm missing the "T" as symbol for the button [create new text] in a editor. So i'm forced to try making a font fitting the icons boundary which is giving me some troubles.
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.