一.生成字体图标文件
二.导入字体图标库
@font-face { font-family:icomoon; src:url('../fonts/icomoon.eot'); src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon.svg') format('svg'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.woff') format('woff'); } [class^="icon-"], [class*=" icon-"]{ font-family: icomoon; font-style: normal; } .fa { display: inline-block; font: normal normal normal 16px/1 icomoon; font-size: 18px; font-weight:bold; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-number1 { *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); } .icon-number2 { *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); } .icon-number3 { *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); } .icon-number4 { *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); } .icon-number5 { *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); } .icon-number6 { *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); } .icon-number7 { *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); } .icon-number8 { *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); } .icon-number9 { *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); }三.引用字体图标
<span class="fa icon-number1" style="color: #156BA1;"></span>四.结果