不说废话,大牛初始亦菜鸟,成功之路贵执行,马上行动!如果想获得更优质的显示效果,请在Chrome、Firefox等现代浏览器浏览本站。

分享一组矢量图标–UX图标字体库

:: 码农生涯 EricHu 1478℃ 0评论

以下内容转自:http://ux.etao.com/,原文链接:http://ued.alimama.com/posts/219

科技日新月异的今天,市面上各种分辨率、各种显示精度的显示设备层出不穷,在不同精度不同分辨率的显示设备下图标的应用展现出现了不同要求;如设计师为iphone 3gs设计的图标在iphone4下的展现就显得很糟糕了。我们为pc端产品设计的图标到平板电脑上显示(new ipad)上展现就不尽人意了。那这么多的显示设备,那么多的图标尺寸设计师难道要一个一个去优化去设计吗?

传统位图形式的图标应用使设计师在不同平台上花费很多重复的工作量,而且还未必能做到面面俱到。矢量图标技术在网站、app中的应用就显得尤为重要了;

矢量技术在图标上的应用:

现在可以承载矢量图形,同时又可以在app、web上使用的主要有svg和我们熟悉的字体文件;在这里我们主要介绍后者——图标字体;顾名思义图标字体是将图标以字体文件为载体在页面中展现,前端工程师可以通过控制字体的方式控制图标的大小颜色;

ux_icon

一定要添加iconfont: "打印机", asiicode: 120 ,不然在window xp下用safari会出现蓝屏。

第一步:使用font-face声明字体

@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- */
}

第二步:定义使用iconfont的样式

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

第三步:挑选相应图标并获取字体编码,应用于页面

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

打包下载:直接下载

转载请注明:RDIFramework.NET » 分享一组矢量图标–UX图标字体库

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址