Iconfont在IE7下需要使用unicode方式,但是这种方式不太方便,使用以下代码可使IE7像普通用法使用。
@font-face {font-family: "anticon"; src: url('/font/iconfont/iconfont.eot'); /* IE9*/ src: url('/font/iconfont/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/font/iconfont/iconfont.woff') format('woff'), /* chrome, firefox */ url('/font/iconfont/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('/font/iconfont/iconfont.svg#anticon') format('svg'); /* iOS 4.1- */ } .anticon { font-family:"anticon" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .icon-codepen { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); } .icon-home { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); } .icon-menu-fold { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); } .icon-menu-unfold { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); } .icon-doubleleft { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); } .icon-doubleright { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
把所有的需要用的图标做一份,以后就可以直接使用了,另外在IE7下使用ToogleClass切换Icon不起作用,扩展Jquery方法如下
//扩展ToggleClass支持IE7 $.fn.extend({ toggleClassIE7:function(p_para1,p_para2){ if(/MSIE 7.0/ig.test(navigator.appVersion)) { var $clone = $(this).clone(true); if($clone.hasClass(p_para1)) { $clone.addClass(p_para2).removeClass(p_para1); } else { $clone.addClass(p_para1).removeClass(p_para2); } $(this).after($clone); $(this).remove(); } else { $(this).toggleClass(p_para1+" "+p_para2); } } });
使用的地方用toggleClassIE7即可。总体上ie7坑太多,还是建议放弃支持为好。