使用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圖片集

例如：
固然，這些樣式你能夠本身定義的，可是爲了兼容性，最好仍是使用原版的吧！