icon图标的使用

登录阿里巴巴矢量图标库，选择喜欢图标：http://www.iconfont.cn/

将喜欢的图标添加到购物车，然后 下载代码 可以将图标下载到本地，项目中使用会比较舒服。

将下载的代码解压到项目中，会有三种图标使用方式：

1、symbol引用，可以使用多色图标，但兼容性较差，支持IE9以上及主流浏览器，渲染性能一般

2、font-class引用，兼容IE8及以上，语义明确

3、unicode引用，兼容效果最好，支持IE6及以上，可通过css操作字体来改变大小及颜色

这里使用 3 来引用图标，实际demo中也有说明

页面中引用样式：

@font-face {font-family: "iconfont";
          src: url('font_ld07xzkgmhjmj9k9/iconfont.eot'); /* IE9*/
          src: url('font_ld07xzkgmhjmj9k9/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('font_ld07xzkgmhjmj9k9/iconfont.woff') format('woff'), /* chrome, firefox */
          url('font_ld07xzkgmhjmj9k9/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('font_ld07xzkgmhjmj9k9/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        .iconfont {
          font-family:"iconfont" !important;
          font-size:56px;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
        }

这里注意，url中一定要匹配正确

或是更加简便的在界面中引用：iconfont.css

接下来使用

<i class="iconfont">&#xe611;</i>

即可