jQuery Forum

Icon fonts present their own challenges, such as using them in an accessible way. We're looking into the best way to move forward, whether that's SVG with fallbacks or fonts with a helper or potentially Web Components in the future, is unknown.

Thank you for the answer! Probably I explained my problem not clear enough. jQuery UI provide CSS Framework with class "ui-icon" and many other icon specific classes. As the result jQuery UI provides set of icons which other developers can use.

Probably the Font Custom tool (see on github also) could help with the implementation if you prefer usage of SVG format for the fonts.

I completely agree with that. It's really time to change png icons to font based. This will give more flexibility, and help to get higher quality of icons with smaller size.

Now with the Release of jQuery 2.x the Support for IE<9 is optional. Probably it is the best way to offer Fontawesome as an alternative in Themeroller-Packages, so the Developer can decide what to choose. Otherwise people will build their own CSS to overload the standard CSS (=extra load).

Thanks to all wrote comments to my post.

Thank you very much for pointing to this! I found here new icons used in jQuery Mobile 1.4. It has essential improvements compared with the demo used the previous version (1.3.2). I hope jQuery UI will have the same changes in the future.

Apologies for resurrecting an old thread, but I thought better this in context than a new one.

We will switch to Chassis when it's ready, but until then nothing will change.

I've done :)

Demo: http://mkkeck.github.io/jquery-ui-iconfont/
Fork / Repository https://github.com/mkkeck/jquery-ui-iconfont

@keck75 That is awesome!.

Update: Version 1.4 of font is available. Some CSS-only loading animations are added to.
Take a look at the demo: http://mkkeck.github.io/jquery-ui-iconfont/
Github repository: https://github.com/mkkeck/jquery-ui-iconfont

Now the first official release (version 1.4.1 ) of Icon Font for jQuery UI is available.
It is added to npm too: https://www.npmjs.com/package/jquery-ui-iconfont .

I'am working on a new release with more icons and better class names for some stuff.

For peoples wich are interest:
The icons are hand drawn with Inkscape. The pixel-perfect size is 14 pixels, but drawn in a 28x28 pixel gutter. All pathes of each icon would be optimized in new releases. I'm planning to support the font-formats ttf, eot, woff and woff2 in feature releases.

You can still donwload: https://github.com/mkkeck/jquery-ui-iconfont/releases

This is getting even better!

They already have a plan for vector icons, and it is based on SVG, (as jQuery Mobile already has) not an icon font.

@watusiware Thanks for the reply. I am not an expert in web development but recently I have to do it. I know jQuery and jQueryUI are very famous and it was kind of unexpected jqueryui didn't support retina displays that is why I came across this thread.

@ watusiware:

Why should web fonts not good enough? And for peoples, prefer SVG:

1. @media screen and (-webkit-min-device-pixel-ratio:0) {
     @font-face {
       font-family: 'jquery-ui';
       src: url('fonts/jquery-ui.svg#jquery-ui') format('svg');
     }
   }
            
         

They already have a plan for vector icons, and it is based on SVG

Okay, yes there's a plan. But this plan is only a plan wihout any progress at the moment. But some one want and / or need a solution now. And of course, I've told like olegki about this round about three years ago, but with other (modern) PNG icons. But I think, there are some peoples at the projects, so I've felt, which don't like improvements from somebody out side the core team.

That's the reason why I prefer web fonts, instead of an SVG-only solution. You are more flexible and it's easier to integrate, without needing extra plugins or hacks.


@olegki:

I personally be very disappointed from the progress of developing  jQuery UI CSS Framework and  jQuery UI icons especially. The  CSS Framework and  jQuery UI ThemeRoller were very modern 5-6 years ago, but there don't corresponds (in my opinion) the state of modern web development today. Sorry.

 

Yes! I am too!

Reading this topic and all the replies over the years sent me down a rabbit hole looking for a solution. (A pure svg solution that is, not font icons...)

I would wait for Chassis, but it looks like development has stalled on that project. If that's not true I'm happy to be corrected.

Want I want is a drop-in replacement for a theme.css file, that replaces png images with svg. I've had a go at this using some ideas from jquery mobile, and here's what I've learnt:

  - svg sprites are hard to do, but the idea of concatenating images into a single file can still be done using data uri's.
  - the current method for changing icon colors just requires changing png files, this keeps the css simple.
  - the way to change icon colors using svg is to change the fill attribute.
  - there doesn't seem to be a way to set the fill attribute in the svg separately via css.
  - this means the svg for each icon needs to be repeated up to 7 times (depending on the theme) to represent each state.
  - the svg in the data uri is quite repetitive (only the fill color needs to change), but it's also quite possible to automate it, possibly via themeroller.
  - I did a quick check of creating 7 background-image data uri's for each icon in the start theme, which blows the file size out to 676K from 24K
  - It might be possible to compromise and just have svg icons for more commonly used icons.
  - It also creates the possibility of adding new, svg only icons without needing to update the png files.

I've attached a theme file for the start theme, if anyone wants to have a look. I've added the data required for just the home icon to the end of the file. The svg for the icon is from the jquery mobile project.

Would be interested to hear if people think it's worth pursuing any further.

Hi Scott,

Yeah I've tried every variation I could find, but it doesn't work. I believe the svg would need to be an element on the page to apply css to it, but because it's being used as a background image it's not accessible via a selector. I didn't get very far adding the svg icon as content via css, but that may be an option?

If there was a way to do this using currentColor that would be a great solution. If not, I think it would still be interesting to look at generating svg's via data uri's. I've spent some more time looking at it today since my last post, and the data can definitely be made smaller than the file I attached.

I've since left the original theme.css as it is, and added a background-position of 0 0 as an override along with the svg for the background image. That way if a selector isn't found the fallback png still works. I'm also looking at just creating the svg's for the icons I'm using per project, which means a much more acceptable file size.