阿里巴巴图标应用教程-iconfont

阿里巴巴图标应用教程
3.1 PC端应用教程
iconfont对于前端应用来说有很多便捷：
1、自由变化大小
2、自由修改颜色
3、可以添加一些视觉效果如：阴影、旋转、透明度。
4、兼容IE6
应用步骤：
1
font-face声明字体
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
url('iconfont.woff') format('woff'), / chrome、firefox /
url('iconfont.ttf') format('truetype'), / chrome、firefox、opera、Safari, Android, iOS 4.2+/
url('iconfont.svg#iconfont') format('svg'); / iOS 4.1- */
}
2
定义使用iconfont的样式
.iconfont{font-family:"iconfont";
font-size:16px;font-style:normal;}
3
挑选相应图标并获取字体编码，应用于页面
&#33

用到的知识点：
before
font-family:中文时必须用引号，英文的可以不用