分享一组矢量图标–UX图标字体库
以下内容转自: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">!</i>
打包下载:直接下载
分享一组矢量图标–UX图标字体库的更多相关文章
- Font Awesome,一套绝佳的图标字体库和CSS框架
http://fontawesome.dashgame.com/ http://www.runoob.com/font-awesome/fontawesome-tutorial.html Font A ...
- 【css】最近使用的两种图标字体库
## 0. 前言 比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png). 页面多图标时,使用雪碧图(多个 ...
- Android 使用图标字体库
首先,在assets资源文件下放入图标字体库. 我这儿采用的是fontawesome-webfont.ttf 然后, 在安卓中加载这个资源文件 Typeface fontFace = Typeface ...
- FontAwesome 图标字体库的使用
在前端开发中,许多新手常会遇见一个问题,参考的网页上有类似下图的图标,但在资源里却找不到对应的文件,这是因为这些网页使用了图标库.这里介绍一种常见的图标库——FontAwesome的使用. 1.登录F ...
- fontawesome图标字体库组件在服务器上显示不出来图标的解决
这个组件在我所开发的网站中被大量使用,为网站增色不少.在本地测试的时候所有图标都能显示出来,可一到服务器上就显示不出来了.网上查列出了可能的原因.其一,IIS没有注册字体类型.经过检查,不存在这个问题 ...
- font awesome (图标字体库)
Font Awesome fa是什么? 图标字体库和CSS框架 怎么用? <link rel="stylesheet" href="https://cdn.boot ...
- 图标字体库(用CSS样式生成搜索、购物车等图标)
参考网址:http://fontawesome.dashgame.com/ 基本图标: 您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称. Font ...
- 微信小程序如何引入外部字体库iconfont的图标
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...
- 开源方案搭建可离线的精美矢量切片地图服务-6.Mapbox之.pbf字体库
项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上,访问地图可以会有点慢,请多多包涵). 01:中国地图:http://test.sharegis.cn/mapbox/html/3china.ht ...
随机推荐
- hdfs中block的使用情况,副本所在情况等等
hadoop fsck /user/hive/warehouse/dataplat.db/hive_datacppa2xsourcendchinaraw/partitiondate=2016-11-2 ...
- JMeter中BeanShell实现写入文件
1.首先F:\test.txt文件为空
- Linux学习笔记(3)-常用命令
江湖传言,Linux和Windows不同,他主要的用途是在一些服务器,或者片内系统上,所以人机交互界面自然就没有Windows那么漂亮,其实也没有那个必要. 所以,学习Linux的第一步,就是学习他那 ...
- CodeForces 103D 分块处理
题目链接:http://codeforces.com/problemset/problem/103/D 题意:给定一个长度为n的序列.然后q个询问.每个询问为(a,b),表示从序列第a项开始每b项的加 ...
- maven archetype:generate 命令简化项目模板数量
在maven里使用 mvn archetype:generate 来创建项目是十分方便的,但有时也不尽然.在网络不好时,从网络上加载 archetype-catalog.xml文件(http://re ...
- apache配置rewrite及.htaccess文件(转载)
今天看到一个哥们的帖子发了个rewrite的帖子,以前也写过一个,配置挺简单的,但当时没注意这个问题,当时没有用到.htaccess文件,在机子上测试了一下,发现确实没法用,于是开始找问题的所在. 自 ...
- 删除 TOMCAT 上次关闭遗留下来的 SESSION 缓存
参考:删除缓存SESSION 找到tomcat目录下文件:%tomcat home%/conf/context.xml,在标签<Resource>前添加 <Manager pathn ...
- javascript学习之运动框架
模仿新浪博客首页的,最新评论: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"&g ...
- linq To DataTable
//将IEnumerable<T>类型的集合转换为DataTable类型 1111 public static DataTable LINQToDataTable<T>(IEn ...
- c# winform编程之多线程ui界面资源修改总结篇
单线程的winfom程序中,设置一个控件的值是很easy的事情,直接 this.TextBox1.value = "Hello World!";就搞定了,但是如果在一个新线程中这么 ...