使用Icon Fonts好处
1.灵活性：轻松改变图标的颜色或其他css效果
2.可扩展性：改变图标大小就像改变字体大小一样容易
3.矢量性：缩放图标不会影响清晰度
4.兼容性：字体图标支持所有现代浏览器
5.本地使用：通过添加定制字体到本地系统，可以在不同的设计和编辑应用程序中使用
他们
工具
IcoMoon
https://icomoon.io/
创建字体图标
http://flowerboys.cn/font/
字体文件格式：
ETO
IE专用字体
WOFF Web字体最佳格式
TTF mac 和 WIN操作系统
SVG 用于字体渲染的一种格式 google 苹果
考虑到兼容性，同时引入
@font-face属性
用法：
@font-face{
font-family:<family-name>
src:[<url>[format(<string>#)?|<font-face-name>]]#;
font-weight:<weight>;
font-style:<style>;
}
@font-face{
font-family: "imooc-icon";
src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
src: url("../fonts/icomoon.eot?#iefix") format("embedded-
opentype")/*IE6-8不显示问题,起作用的是？*/
,url("../fonts/icomoon.woff") format("woff")
,url("../fonts/icomoon.ttf") format("truetype")
,url("../fonts/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
icomoon第三个按钮下载字体后解压
demo里面取得十六进制码，放入<i></i>中注意前面加&#x后面加；
font+css
<i class="imooc-icon icon-pen"></i>
.icon-pen:before{
content:"\e604"；
}
1.：before伪元素 name前插入
2.content属性
下载界面preference可以改变use类型
一个i标签插入两个元素
