Share a set of vector icons –ux icon Font Library

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.