有些浏览器(比如ie9，firefox和chrome的某些版本)会要求字体文件有cors权限，一般服务器都默认字体后缀已经开通权限。
如果个别服务器（比如快速搭建的测试服务器）未开cors权限造成字体图标跨域，则需协调运维在nginx上进行一个小配置
location ~* \.(eot|otf|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
图标样式写入公用样式，项目中用到直接使用，具体每个图标对应的代码可以在下面点击图标查看：
(附：icon图标制作流程移步：http://page.jd.com/channel/commonUI/1.0.0/html/channel-demo.html)

如果有需要兼容ie67的地方单独写吧：
dom结构不一样~ 不可以写伪类！是这样: <i class="ie67"></i>
样式是这样: span{
font-size: 32px;
color: red;/*定义颜色*/
height: 32px;/*定义大小*/
*zoom: 1;
font-family: wbi;
}
                                                                                  

自定义图标大小和样式

如果上面的颜色和尺寸都不满意~可以自定义图标，
设置颜色和字号尺寸即可,
比如下面我定义了一个很小的对号,写了全部的样式
然后又定义了一个大大的叉号，仅仅是写了一个样式font-size:200px.其它样式完全继承自公用样式

1. .ok:after{
        content: "\e911";/*content的值是图标代码，可以去源码里面找*/
        font-family: 'wbi' !important;
        color:red;
        font-size:12px;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        display: inline-block;
    }
2.
<i class="wbi-close wbi-xl wbi-blue" style="font-size: 200px"></i>

不考虑ie67的话：

兼容ie67:

自定义图标大小和样式

图标颜色

图标释义

图标尺寸

图标适用