引言
奧森圖標（Font Awesome）提供豐富的矢量字體圖標—通過CSS可以任意控制所有圖標的大小 ，顏色，陰影。
網頁小圖標到處可見，如果一個網頁都是干巴巴的文字和圖片，而沒有小圖標，會顯得非常簡陋。下面的小圖標，你也可能經常會看到的，如圖所示：
你可能說——“我們用的都是彩色的，不是黑白的”——別着急，下面會講到。因為它們也可以變為彩色的。
黑白的也好，彩色的也罷，如果用傳統的“css + 圖片”的方式來制作這些icon，我估計你至少得雇佣一個專業的設計師吧。一般的程序猿，包括前端程序猿，估計只能去搜索了，不會自己拿ps畫。
一般情況我們都會在網上搜索一些相關的圖片，比如黑白圖片的！！
但是問題又來了，如果你搜索來的是黑白的，現在也用黑白的，后期網站變化主題怎么辦？你搜出來的是16 * 16的，要有個頁面需要 32 * 32的怎么辦？如果沿着這個方向考慮，你會發現，自己將在這上面耗費大量資源和精力。
但是如果我告訴你，有一個東西，它已經為你准備了將近500個常用icon圖標（還在不斷更新），能大能小，能隨便修改顏色，完全開源，完全免費，你會不會心動？如果你非常着急，先去百度一下“font-awesome”，再來繼續讀文章不遲。
應用font-awesome
font-awesome當前的版本是4.2.0，咱們就直接用這個版本的來說。
先看看它的好處：
下載
去http://www.thinkcmf.com/下載，解壓之后，應該能看到“css”和“font”兩個文件夾。css文件夾中存放着css文檔，font文件夾中存放在着適用於不同瀏覽器的字體文件。其中，css文件夾中可以只保留 font-awesome.min.css 和 font-awesome-ie7.min.css 兩個文檔，其他的可以刪掉。結構應該如下：
簡單應用
將整理好的文件夾加入到你的網站，新建一個測試頁面 demo.html，將css文件夾中的兩個css文件，引入到頁面。
<link href="fontawesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" /> <!--[if IE]> <link href="fontawesome-4.2.0/css/font-awesome-ie7.min.css" rel="stylesheet" /> <![endif]-->
如上代碼，如果是IE瀏覽器，需要引入 font-awesome-ie7.min.css ，因為fontAwesome支持IE7+瀏覽器的。
引用CSS文件之后，接下來就可以使用圖標了。例如，我要在頁面中顯示一個“鏈接”的圖標，我可以這么寫：
<span><i class="fa fa-link"></i> 鏈接</span>
此時頁面將顯示：
顯示是顯示出來了，那么對應鏈接的這個css類“fa-link”我是從哪里找來的呢？
答案非常簡單！進入官網的icon頁面，里面有所有的icon的css類，就可以找到你想要的那個圖標的css類了。
（注意，在“fa-link”前面還要加入一個“fa”類，例如 <i class="fa fa-link">）
設置大小和顏色
學會了以上的簡單使用，設置顏色和大小非常簡單，只要你會用css設置文字的顏色和大小就行。直接看代碼：
<span style="font-size:12px;"><i class="fa fa-link"></i> 鏈接</span> <br /> <span style="font-size:20px;"><i class="fa fa-link"></i> 鏈接</span> <br /> <span style="color:red"><i class="fa fa-link"></i> 鏈接</span> <br /> <span style="color:white;background-color:#003399;"><i class="fa fa-link"></i> 鏈接</span>
得出的結果就是：
其他應用
fontAwesome還有其他更加復雜一點的應用，包括固定寬度、浮動、反轉、旋轉、疊加圖標等。
官網上講解的更好，我就不再這里重復描述了，可以去http://www.thinkcmf.com/font/examples查閱這些應用的例子。
綜合實例
html代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css"/> <!--[if IE]> <link type="text/css" rel="stylesheet" href="css/font-awesome-ie7.min.css"/> <![endif]--> <style> html,body{width:100%;height:100%;padding:0;margin:0;} .login_formDiv{background: #f0f0f0;opacity: 0.8;padding: 20px;border-radius: 3px;} .login_formDiv .groupSame{width:252px;margin:0 auto;margin-bottom: 10px;text-align:center;position:relative;} .groupSame i{position: absolute;left: 10px;font-size: 24px;color: #999;top:5px;} .login_formDiv input{padding-left:40px;height:30px;line-height: 30px;width:210px;font-size: 14px;border:1px solid #999;} .login_formDiv .subtn{background: #4AB6D5 !important;padding:0;width:250px;border-radius:3px;border:1px solid #4AB6D5;cursor:pointer;font-size: 14px;color:#fff;} </style> </head> <body> <div class="login_formDiv"> <div class="groupSame"><input type="text" placeholder="用戶名"/><i class="fa fa-user"></i> </div> <div class="groupSame"><input type="password" placeholder="密碼"/><i class="fa fa-unlock-alt"></i></div> <div class="groupSame"><input type="submit" value="提交" class="subtn"/></div> </div> </body> </html>
實現結果如圖所示：
