Use Webfont to expand icons for Easyui

Now back to the PC-side development, began to use the Easyui framework. After picking up the Easyui, I felt that many of the techniques used in this framework were too old and the page style was too stylized. Single from the icon, this colorful icon users look at a silly eye, while the entire framework provides a few icons, many buttons and menus need to make their own icons.

Is there a convenient way to expand the icon quickly? It's actually very simple, you can use the Webfont icon. Webfont is a technique for extending a vector font file to a browser, and his intention is to extend the client's font to prevent the client from displaying an exception because of a missing font on the device. Download the font from the server and display, if it is only 26 letters in English, this idea is still feasible, but the actual application process because the Unicode code is too large, such as Chinese characters, tens of thousands of words need to download the font from the server is obviously unrealistic, So the actual application of Webfont more is used in the icon aspect. The Webfont icon is used in a large number of today's PC and mobile, and the icons used by our familiar bootstarp3 are the Webfont icons.

Now that you think about the technical solution, how do you quickly expand the Easyui icon? This is very simple, because now the Webfont production technology is very mature, many online tools directly provide Webfont production, here are two tools resources:

1.http://www.iconfont.cn/Hang Ali name of the icon-making site, which has a very detailed webfont production tutorials, more importantly, he also provides a large number of Ali and third-party icon library, you can quickly export these ready-made icons.

2.http://fontello.com/a foreign website, integrates many well-known Webfont icon libraries, but also supports the import and upload of ready-made icon libraries and vectors, better than Ali is his support for their own definition of the icon name and order.

These icon resources can be used to quickly expand our own Project icon library, but also do not need a special art, it is affordable ^_^.

So the question comes, how to integrate with Easyui? In fact, it is very simple, there are two ways to use Webfont:

1. How to use fonts, because the essence of Webfont is the font, so the character of each icon is placed in the location where we want to display the icon, and the style to set the character of the font, so that the character is rendered as an icon.

2. Using class, in fact, is similar to the above, just define a set of classes, in the class to set the corresponding font Webfont to the Content property, and then set the font, so that the maintenance of the character of their own process.

Specific transformation process:

1. Select the desired icon from the http://fontello.com/icon Library, then change the name of each icon, here I select the Easyui icon library to cover the icon, and their name according to Easyui icon library corresponding name.

2. The following directory structure will be extracted:

CSS and font are the files that our icons Keep, because Webfont is actually a vector image, and the font is a vector file under each browser, and CSS is the library we call. Demo.html is a tool site for me to view the tool, can browse demo.html quickly determine our class name.

3. Do not introduce Easyui Icon.css file when using, but introduce the fontello.css of our CSS directory, if need animation can also introduce Animation.css file.

Advantages:

is actually the advantage of Webfont

1. Vector diagram, small resources, and support unlimited scaling (support scaling in Easyui is not very obvious).

2. Support dynamic color change, easy to make the highlight icon (this used to do with the picture is very troublesome, often to do two sets of pictures).

3. There are ready-made icon library, basically can meet the needs, no need to find art production.

4. The flat icon looks better.

Disadvantages:

1. Each icon library's icon size is slightly different, it will cause the icon side to display the time to give people a sense of ataxia.

2.webfont This technology browser compatibility is poor (in fact, only if the antique browser is supported, optional Easyui is an antique).

Use Webfont to expand icons for Easyui