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

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

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

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

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


一定要添加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>

  打包下载:直接下载

分享一组矢量图标–UX图标字体库的更多相关文章

  1. Font Awesome,一套绝佳的图标字体库和CSS框架

    http://fontawesome.dashgame.com/ http://www.runoob.com/font-awesome/fontawesome-tutorial.html Font A ...

  2. 【css】最近使用的两种图标字体库

    ## 0. 前言 比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png). 页面多图标时,使用雪碧图(多个 ...

  3. Android 使用图标字体库

    首先,在assets资源文件下放入图标字体库. 我这儿采用的是fontawesome-webfont.ttf 然后, 在安卓中加载这个资源文件 Typeface fontFace = Typeface ...

  4. FontAwesome 图标字体库的使用

    在前端开发中,许多新手常会遇见一个问题,参考的网页上有类似下图的图标,但在资源里却找不到对应的文件,这是因为这些网页使用了图标库.这里介绍一种常见的图标库——FontAwesome的使用. 1.登录F ...

  5. fontawesome图标字体库组件在服务器上显示不出来图标的解决

    这个组件在我所开发的网站中被大量使用,为网站增色不少.在本地测试的时候所有图标都能显示出来,可一到服务器上就显示不出来了.网上查列出了可能的原因.其一,IIS没有注册字体类型.经过检查,不存在这个问题 ...

  6. font awesome (图标字体库)

    Font Awesome fa是什么? 图标字体库和CSS框架 怎么用? <link rel="stylesheet" href="https://cdn.boot ...

  7. 图标字体库(用CSS样式生成搜索、购物车等图标)

    参考网址:http://fontawesome.dashgame.com/ 基本图标: 您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称. Font ...

  8. 微信小程序如何引入外部字体库iconfont的图标

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...

  9. 开源方案搭建可离线的精美矢量切片地图服务-6.Mapbox之.pbf字体库

    项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵). 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.ht ...

随机推荐

  1. ADO.NET 读取Excel文件,并作数据源

    项目中需要用的功能,贴上代码了. 需要注意的地方:配置Web.config的时候要注意版本问题! //若是在Web.config中配置数据源,如下 <add key="ExcelCon ...

  2. Hibernate的检索方式

    Hibernate的检索方式 检索方式(查询的方式) 导航对象图检索方式: 根据已经加载的对象导航到其他对象 Customer customer = (Customer)session.get(Cus ...

  3. python下编译py成pyc和pyo

     python下编译py成pyc和pyo   其实很简单, 用 python -m py_compile file.py python -m py_compile /root/src/{file1,f ...

  4. Symmetric Tree

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...

  5. CodeForces 520B Two Buttons(用BFS)

     Two Buttons time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  6. php 正则 常用基础

    正则表达式 用来描述一串字符串的字符串 定界符 除了字母数字反斜线之外的所有字符都可以 / / (强制使用) | | !! 原子 在自然界中的最小单位 叫做原子 正则中的原子:可以打印的字母,数字,符 ...

  7. crontab安装和用法(定时任务)

    crontab命令常见于Unix和Linux的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于"crontab"文件中,以供之后读取和执行.通常 ...

  8. ArrayFire与CUDA环境配置问题

    1.ArrayFire与cuda版本不一致时的解决方案 以Visual Studio2013为例,在工程-属性-C/C++--预处理加入宏AFCL,即可解决.

  9. JavaScript获取当前日期,昨天,今天日期以及任意天数间隔日期

    <script language="JavaScript" type="text/javascript"> function GetDateStr( ...

  10. apache 虚拟目录

    补充:必须使用80端口才能正常使用  C:\Windows\System32\drivers\etc\hosts 最后添加上: 127.0.0.1 shenyi.com 127.0.0.1 offli ...