阿里巴巴图标应用教程-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:中文时必须用引号，英文的可以不用