一.生成字体图标文件
二.导入字体图标库
@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>
四.结果