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

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

例如：

當然，這些樣式你可以自己定義的，但是為了兼容性，最好還是使用原版的吧！