Using vector icons as web fonts instead of PNG in jQuery UI CSS Framework

Question

I have a common problem of understanding, and it is not clear to me what the best way forward would be. So I decided to ask the community for advice.

jQuery UI defines a CSS Framework that contains the "ui-icon" class and many special classes for different standard icons ( 320 common icons ) that can be seen on the test page . There are many plugins, websites, etc. that use the CSS structure. For example jqGrid plug it. The grid to be created by jqGrid contains icons.

After writing an answer about using the font Awesome icons instead of some jQuery UI icons, I regularly ask myself the same question: why does the jQuery UI CSS framework have bitmap icons and not vector icons ? In my opinion, it would be very practical to have a different implementation of the jQuery UI CSS Framework icon part. In case you can just replace the jQuery UI theme and have icons that were better implemented.

We now live in high DPI monitors (an event for tablets and smartphones). So many people use a zoom setting above 100% as a standard setting in a web browser. If you compare

from

one could see the differences very clearly.

Current versions of web browsers (including the old IE7) support vector-based web fonts in at least one of the WOFF, EOT, TTF, OTF, or SVG formats. Fonts are part of the W3C Working Draft CSS 3 Font Module (see http://www.w3.org/TR/css3-fonts/#src-desc ).

So why is no one replacing the current jQuery UI PNG icons with web font alternatives? There are many free open source fonts that are already provided (see here , here , here , and so on) the most (but not all) of the icons you need.

The added benefit of using web fonts that I see will make it easier to create jQuery UI Themes. If I compare the images ui-icons_XXX_256x240.png used inside the base theme, or if I compare them with the corresponding images of another theme, then I see that the color used in the images is the only difference between them. When using vector fonts, you can simply specify color , background-color or use the CSS linear-gradient or radial-gradient styles to change colors or create nice color effects:

I see many advantages of using vector icons, but so far I have not found a good place to place a function request for vector icons. I posted a function request and this one , but I think more and more that we have a jQuery UI Framework problem here.

After the release of jQuery 2.0 , which reduces support for IE 6/7/8, is it time to replace the bitmap PNG icons with vector web fonts later?

Perhaps I missed some important disadvantages of using website-based web fonts? Very poor performance, for example, which I have not seen so far or some other things? Is creating all the necessary icons too complicated? Are there any other problems?

I decided to ask a question in order to draw other people's attention to the problem that I see. I’m afraid that without appropriate feedback from the community, my request for a function will have no effect.

What would be the best way to post such a function request? I must add that creating fonts or images is not a subject where I am good at myself. Therefore, I myself can not participate in the implementation. Unfortunately.

Any advice or your opinion on the topic is welcome!

Answer 1

Fonts are not suitable for implementing icons. Look at the road signs - at least three colors are required. For this purpose, fonts will be replaced by SVG or a similar format, possibly with hint instructions.

why jQuery UI framework has raster icons instead of vector

I think, due to the lack of standards for the implementation of vector icons at the moment.

Is creating all the necessary icons too complicated? Are there any other problems?

Yes, it’s not easy to create all the icons in a font that work well in all browsers. But there is one more problem. A good solution is to implement the google logo in a vector format rather than a raster. As you can see, this has not happened yet.