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

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 特性：

一、一个字体文件， 249 个图标。

二、用CSS控制样式。

三、无限缩放。

四、我的、商业都可自由使用。

五、支持IE7+。

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

七、设计师的助手。

八、兼容屏幕阅读器。

Font Awesome的使用：

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

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

三、随便选择一个CSS样式文件，你能够选择font-awesome.less或者font-awesome.min.css做为你的图标样式文件。

四、打开你所选择的样式文件，编辑样式文件中的字体路径，固然这个路径是针对你css样式文件位置来肯定的。

五、在你的项目中引用样式文件便可。

例如：

 

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

 

• 六、在你须要使用这些图标的地方加上一个html标签，给该标签一个class属性，属性值请参阅 Font Awesome图片集

例如：
固然，这些样式你能够本身定义的，可是为了兼容性，最好仍是使用原版的吧！