我每次找圖標時都是在阿里的開源圖標庫中找的，但是使用起來不是很方便。而我發現了fontawesome之后，覺得實在不錯，所以分享給大家。
這是一些參考的文檔。
第一部分： 基本介紹
下面是他的介紹，我們可以看到它可以兼容到IE7及以上。
它的主要特點如下：
即它的特點是使用css控制，並且滿足各種需要。
第二部分：使用fontawesome
下載
首先，去官網下載。 下載之后得到一個壓縮包，解壓縮后可以看到css文件夾和font文件夾。如下所示：
其中fonts中存放的是適用於不通瀏覽器的字體文件。 css中包含的就是我們需要的fontawesome文件。 顯然*min.css就是壓縮后的文件。那么ie7標識的文件是什么呢？ --- 顯然是用於兼容ie7及以上的。。。
基本應用
如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fontawesome</title> <link rel="stylesheet" href="./4.2.0/css/font-awesome.min.css"> <!--[if IE]> <link rel="stylesheet" href="./4.2.0/css/font-awesome-ie7.min.css"> <![endif]--> </head> <body> <span><i class="fa fa-link"></i>鏈接</span> </body> </html>
這就是一個最基本的使用了，效果如下所示：
注意： 這里我們使用了fa fa-link實現了鏈接圖形，實際上是參考自官方網站的。
這里有下面幾點值得注意：
- 雖然在頁面中只引入了css文件，但這並不代表我們可以把fonts文件刪掉，因為在使用fontawesome時，會自動調用fonts中的文件，盡管我們沒有引入， 非常重要。
- font-awesome-ie7.min.css的作用在於當頁面渲染在了IE瀏覽器上時，這個文件可以兼容IE7及以上的瀏覽器， 這覺得是足夠了。
- 我們通常使用span加i的形式來使用fontawesome。
- i標簽是表示斜體的，所有瀏覽器都支持，並且也存在於HTML5的標准中，所以可以放心使用。
- 在fa-link前一定是要添加fa的，他們是配合使用的。
顏色、字體大小的應用
如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fontawesome</title> <link rel="stylesheet" href="./4.2.0/css/font-awesome.min.css"> <!--[if IE]> <link rel="stylesheet" href="./4.2.0/css/font-awesome-ie7.min.css"> <![endif]--> </head> <body> <span ><i style="color:red" class="fa fa-link"></i>鏈接</span> <br> <br> <span style="color:red" ><i class="fa fa-link"></i>鏈接</span> <br> <br> <span style="color: blue; font-size: 25px;" ><i class="fa fa-link"></i>鏈接</span> <br> <br> <span><i style="color: blue; font-size: 25px;" class="fa fa-link"></i>鏈接</span> </body> </html>
最終效果如下：
旋轉圖標
fa-spin 和 fa-spinner, fa-refresh, fa-cog組合
缺點： 只支持IE10+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fontawesome</title> <link rel="stylesheet" href="./4.2.0/css/font-awesome.min.css"> <!--[if IE]> <link rel="stylesheet" href="./4.2.0/css/font-awesome-ie7.min.css"> <![endif]--> </head> <body> <span ><i class="fa fa-spin fa-spinner"></i> 旋轉 </span> <br> <span ><i class="fa fa-spin fa-refresh"></i> 旋轉 </span> <br> <span ><i class="fa fa-spin fa-cog"></i> 旋轉 </span> <br> </body> </html>
效果如下所示：
翻轉圖標
即使用fa-rotate-90就可以使圖標翻轉90度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fontawesome</title> <link rel="stylesheet" href="./4.2.0/css/font-awesome.min.css"> <!--[if IE]> <link rel="stylesheet" href="./4.2.0/css/font-awesome-ie7.min.css"> <![endif]--> </head> <body> <span ><i class="fa fa-tree"></i> 旋轉 </span> <br> <span ><i class="fa fa-tree fa-rotate-90"></i> 旋轉 </span> <br> <span ><i class="fa fa-tree fa-rotate-180"></i> 旋轉 </span> <br> <span ><i class="fa fa-tree fa-rotate-270"></i> 旋轉 </span> <br> <span ><i class="fa fa-tree fa-rotate-360"></i> 旋轉 </span> <br> </body> </html>
最終效果如下所示：
更多教程請看這里。