字体图标兼容IE

xiaoxiao2021-03-01  2

一.生成字体图标文件

二.导入字体图标库

@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>

四.结果

转载请注明原文地址: https://www.6miu.com/read-3650259.html

最新回复(0)