簡介：讓你可以即時定製的可伸縮矢量圖標；
公有302種圖標任你選擇；
圖標的風格，如：大小、顏色、陰影可以通過css樣式修改；
支持ie6、7；
圖例：
demo：
<!DOCTYPE html> <html > <head> <meta charset="UTF-8" /> <meta name="author" content="@my_coder"> <title></title> <!-- 方法一：引入字體、圖標樣式 優點：直接引入css,在html裏直接寫入對應的css樣式名即可，不用查找css樣式名對應的值 缺點：引入了沒有用到的樣式，代碼冗餘 <link rel="stylesheet" href="css/font-awesome.min.css" /> <link rel="stylesheet" href="css/font-awesome-ie7.min.css" /> 兼容ie6、7 --> <style type="text/css"> /* 方法二：自定義樣式 優點：樣式文件較小，只寫自己需要的樣式 缺點：需要查找每個樣式對應的值，比較繁瑣 */ @font-face { font-family: 'FontAwesome'; src: url('font/fontawesome-webfont.eot'); src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('font/fontawesome-webfont.woff') format('woff'), url('font/fontawesome-webfont.ttf') format('truetype'), url('font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), url('font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); font-weight: normal; font-style: normal; } .icon-home:before{ content: "\f015"; /*'\f015'代表‘家’的圖標，每個圖標有對應的值*/ } .icon-home { /*兼容ie6、7*/ *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); } li{font-family: 'FontAwesome';font-size:30px;display:block;color:#aaa;line-height:40px;} li:hover{color:#f60;} </style> </head> <body> <ul> <li> <span class="icon-home"></span> 首頁 </li> <li> <span class="icon-smile"></span> 微笑 </li> <li> <span class="icon-microphone"></span> 語音 </li> <li> <span class="icon-rotate-left"></span> 返回 </li> <li> <span class="icon-camera"></span> 相機 </li> <li> <span class="icon-globe"></span> 地球 </li> </ul> </body> </html>
完整實例下載：http://pan.baidu.com/share/link?shareid=538458&uk=688556984