Share a set of vector icons –ux icon Font Library

The following are from: http://ux.etao.com/, original link: http://ued.alimama.com/posts/219

The rapid development of science and technology today, the market in various resolutions, a variety of display precision display equipment in the endless, in different precision and different resolution of the display equipment application show the different requirements, such as the designer for the iphone 3GS design of the icon iphone4 under the show is very bad. We disappointments the icon on the PC-side product to show on the tablet (new ipad). So many display devices, so many icon size designers want to one to optimize to design it?

The application of icons in the traditional bitmap format allows designers to spend a lot of repetitive work on different platforms and not necessarily be able to do everything. Vector icon Technology in the website, app application is particularly important;

Application of vector technology on icons:

Now can host vector graphics, but also can be used in the app, the web to use the main SVG and we are familiar with the font file, here we mainly introduce the latter-the icon font, as the name implies the icon font is a font file as a vector in the page display, The front-end engineer can control the size and color of the icon by controlling the font;

Be sure to add Iconfont: "Printer", asiicode:120, or blue screen will appear in Safari under Windows XP.

First step: Use Font-face to declare fonts

@font-face {font-family: ' Uxiconfont ';    Src:url (' Uxiconfont.eot '); /* ie9*/    src:url (' Uxiconfont.eot? #iefix ') format (' Embedded-opentype '),/* IE6-IE8 *    /url (' Uxiconfont.woff ') Format (' Woff '),/* Chrome, Firefox */    URL (' uxiconfont.ttf ') format (' TrueType '),/* Chrome, Firefox, opera, Safari, Android, iOS 4.2+*/    url (' uxiconfont.svg#uxiconfont ') format (' SVG ');/* iOS 4.1-* * *}

Step two: Define a style that uses Iconfont

. iconfont{font-family: "Uxiconfont"; font-size:16px;font-style:normal;}

The third step: Select the appropriate icon and get the font encoding, applied to the page

<i class= "Iconfont" >& #33 </i>

Package Download: Direct download

Share a set of vector icons –ux icon Font Library