字体图标使用笔记
字体图标使用笔记：
优缺点：
首先，我们先恶补下什么是字体图标：用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。
优点：
- 加载文件体积小
- 统一展示风格，使用方法
- 通过font-size，color就能自由变化大小，修改颜色，就像控制文字一样简单
- 可以添加一些视觉效果如：阴影、旋转、透明度
- 兼容IE6
- 后期维护成本很低
缺点：
- 制作门槛有点高，需要借助专业的工具生成字库文件
- 需要服务器做些相应的配置来解决识别问题和跨域问题
两家相对比较权威的字体图标：阿里巴巴Iconfont 和 Font Awesome
字体图标的使用方法：
第一步：下载
第二步：引入
为了方便资源调用，尽量将.css 和字库文件放在一个文件夹下，不要随意拆开部署，防止无法正常加载字体文件。
Iconfont
<link href="lib/iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
Font Awesome
<link href="lib/font-awesome/font-awesome.min.css" rel="stylesheet" type="text/css"/><!--[if IE 7]><link href="lib/font-awesome/font-awesome-ie7.min.css" rel="stylesheet" type="text/css"/><![endif]-->
第三步：调用
有两种使用方法
方法1、挑选相应图标并获取字体编码(如果字库发生过更新，编码会发生相应的变化，需要重新获取对应编码)，应用于页面。
<i class="iconfont">󰀠</i>
方法2、通过对应的css类名调用
<i class="iconfont iconfont-yunshangchuan"></i>
字体图标的网站：
【01】官网 font awesome
http://www.bootcss.com/p/font-awesome/
【02】阿里巴巴矢量图标
1.1 平台简介
Iconfont.cn 是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新 中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时 iconfont.cn平台作为矢量图标倡导者，积极在线分享矢量图标制作经验、前端应用说明，及应用中常见的一些问题。
1.2 网页矢量图标在线生成工具
Iconfont.cn为解决设计师制作字体图标困难的问题，为用户提供了在线矢量格式转换的功能。设计师只要将设计好的图标上传至平台，平台将会将图标存储在平台上，并转换成多种格式文件。
http://iconfont.cn/help/iconuse.html
iconfont 使用方法。
代码示例：
以font-awesome 举例。
<link href="css/font-awesome.css" rel="stylesheet" type="text/css"/>
<!doctype html><html><head><meta charset="utf-8"/><title>测试</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script><link href="css/font-awesome.css" rel="stylesheet" type="text/css"/><style></style><script></script></head><body><i class=" icon-external-link"></i></body></html>
**
