阿里巴巴图标应用教程

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:中文时必须用引号，英文的可以不用