图标字体定义的三步骤

1、下载字体

2、申明字体

3、引用字体

===================

1、 下载地址： 

 Icomoon.io  (点击相应要下载的的图标(选择性下载)，font格式保存   --下载后有四种个是 四种格式都需要)

 Iconfont.cn 阿里巴巴字体库 (阿里巴巴的下载有案例。)

2、申明方法  (为了兼容各个浏览器 申明比较麻烦。。 但是字体图标连ie6都可以兼容的)

@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#uxiconfont') format('svg'); /* iOS 4.1- */
}

3、引用方法：

<style type="text/css">
    @font-face {
        font-family: 'xiaoqiang';
        src: url('fonts/icomoon.eot'); /* IE9*/
        src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/icomoon.woff') format('woff'), /* chrome、firefox */
        url('fonts/icomoon.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('fonts/icomoon.svg#uxiconfont') format('svg'); /* iOS 4.1- */
    }
    
    div{ font-family:'xiaoqiang'; font-size:50px; color:red;}
</style>