问题:
Font-Awesome字体在ie7上不能toggle,原因是Font-Awesome在ie7上使用expression完成显示的。目前网上有很多遇到的但没找到解决方案。
解决方案:
比较蠢,采用clone/append完成class的toggle。目前只想到这种方案。欢迎更完美的解决方案。
html
<a class="btn btn-link icon-plus-sign"></a>
js
$(function() { $(".btn").click(function() { $(".btn").each(function() { //如果是ie7 if(/MSIE 7.0/ig.test(navigator.appVersion)) { var $aClone = $(this).clone(true); if($aClone.hasClass("icon-minus-sign")) { $aClone.addClass("icon-plus-sign").removeClass("icon-minus-sign"); } else { $aClone.addClass("icon-minus-sign").removeClass("icon-plus-sign"); } $(this).after($aClone); $(this).remove(); } else { $a.toggleClass(openIcon); $a.toggleClass(closeIcon); } }); return false; }); });
最后必须return false; 否则会造成ie7浏览器crash掉。
相关推荐
总结起来,Font Awesome 4.2.0版本的亮点在于其对IE7的良好兼容性,`font-awesome-ie7.min.css`文件解决了旧版IE浏览器图标显示问题,配合主CSS文件使用,可以确保在多种浏览器环境下保持一致的图标显示效果。...
IE9以下版本不支持字体图片库,font-awesome-ie7.min.css解决了这个问题。
在标题中提到的"Font-Awesome-4.4.0"是一个特定的版本,它包含了一系列矢量图形图标,这些图标可以在网页中作为字体文件来使用,从而提供了一种方便的方式来显示一致且可缩放的图形。 在描述中,提到了这个版本...
font-awesome-4.7.0 在线版 1.进入 Font Awesome官网 2. 在html中引入文件 3.在网页中直接检查图标对应源码 下载压缩包文件 1.下载Font Awesome安装包. 2. 复制整个font-awesome目录到你的项目 3. 在你的...
开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min...
总的来说,Font Awesome 4.4.0 提供了一套强大、灵活且易于使用的图标解决方案,无论是在小规模的个人项目还是大型企业级应用中,都能看到它的身影。其丰富的图标库、良好的跨浏览器兼容性和易用的CSS接口,使得它...
1. **矢量图形**:Font Awesome的图标是基于字体的,这意味着它们是矢量图形,可以在任何分辨率下保持清晰,无论是大屏幕还是小屏幕设备,都能呈现出良好的视觉效果。 2. **响应式设计**:由于图标是通过CSS控制的...
这使得图标在各种屏幕分辨率下都能保持清晰,而且易于缩放和响应式布局。 3. **CSS 类名**:每个图标都有一个特定的CSS类名,例如`fa fa-camera-retro`。在HTML中添加这些类名到元素上,就可以轻松地将图标插入到...
这种基于字体的图标方法还支持文本级的操作,如改变颜色、大小、阴影等,且无需处理图像缩放的问题,保持了图标在不同分辨率下的清晰度。 在Font-Awesome 3.2.1版本中,可能会包含以下知识点: 1. 图标集合:这个...
总结,Font Awesome 4.7.0是一个强大且灵活的图标库,其矢量图形和CSS支持使得图标在各种场景下都能展现出良好的视觉效果。无论你是网页设计师还是前端开发者,都可以借助Font Awesome轻松地为项目添加丰富多彩的...
1. 图标数量:Font Awesome 4.7.0版本包含了675个不同的图标,涵盖了社交网络、通用图标、方向指示、媒体播放器等多种类别,满足了开发者在各种场景下的需求。 2. CSS兼容性:此版本对各种浏览器的兼容性进行了优化...
1. **矢量图形**:由于Font-Awesome使用SVG(Scalable Vector Graphics)格式,图标在任何分辨率下都能保持清晰,无论放大或缩小都不会失真。 2. **易用性**:开发者可以通过简单的CSS类名直接在HTML元素中插入图标...
与位图图标不同,矢量图标在不同尺寸下都能保持良好的显示效果。 2. **Font-Awesome的工作原理**:Font-Awesome通过将图标转化为字体文件实现,这样图标就可以像文字一样被CSS控制,包括颜色、大小、阴影等样式。...
"iOS Font-Awesome 工具箱.zip" 提供了一个专门为iOS开发者设计的解决方案,使你能够在iOS应用中轻松集成和使用Font-Awesome图标。 Font-AwesomeKit 是这个工具箱的核心,它是一个Swift编写的开源库,允许开发者在...
Font Awesome 4.7.0版本,适用于QT图标设计、前端网页开发等。上千个图标供你选择。 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。