手机端 图标引用

3.1 PC端应用教程

iconfont对于前端应用来说有很多便捷：

1、自由变化大小

2、自由修改颜色

3、可以添加一些视觉效果如：阴影、旋转、透明度。

4、兼容IE6

应用步骤：

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- */

}

定义使用iconfont的样式

.iconfont{font-family:"iconfont";

font-size:16px;font-style:normal;}

挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#33</i>