使用Font Awesome替换你的网站图标

时间:2022-11-27 10:53:38

http://fortawesome.github.io/Font-Awesome/whats-new/

使用Font Awesome替换你的网站图标

******************IE7BUG begin*********************

问题:
Font-Awesome字体在ie7上不能toggle,原因是Font-Awesome在ie7上使用expression完成显示的。目前网上有很多遇到的但没找到解决方案。 解决方案:
比较蠢,采用clone/append完成class的toggle。目前只想到这种方案。欢迎更完美的解决方案。 html
Html代码 收藏代码
<a class="btn btn-link icon-plus-sign"></a> js
Java代码 收藏代码
$(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掉。

******************IE7BUG end*********************

Font Awesome,原只为Bootstrap而设计的字体图标,不过,现在你可以单独用它来为你的网站工作。丢掉图片图标吧,跟我一起来用Font Awesome。

使用Font Awesome替换你的网站图标

Font Awesome 特性:

1、一个字体文件, 249 个图标。

2、用CSS控制样式。

3、无限缩放。

4、个人、商业均可*使用。

5、支持IE7+。

6、在Retina屏幕上也能完美呈现。

7、设计师的助手。

8、兼容屏幕阅读器。

Font Awesome的使用:

1、先下载Font Awesome字体样式文件和字体。CSS样式文件下载清点这里字体下载请点这里

2、将下载的字体和CSS样式文件拷贝到你的项目目录中去。

3、随便选择一个CSS样式文件,你可以选择font-awesome.less或者font-awesome.min.css作为你的图标样式文件。

4、打开你所选择的样式文件,编辑样式文件中的字体路径,当然这个路径是针对你css样式文件位置来确定的。

5、在你的项目中引用样式文件即可。

例如:

1
<link rel="stylesheet" href="../css/font-awesome.min.css">

or

1
<link rel="stylesheet" href="../css/font-awesome.css">

如需兼容IE浏览器,那请下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。

1
2
3
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->
  • 6、在你需要使用这些图标的地方加上一个html标签,给该标签一个class属性,属性值请参阅 Font Awesome图片集

例如:
使用Font Awesome替换你的网站图标
当然,这些样式你可以自己定义的,但是为了兼容性,最好还是使用原版的吧!