Font Awesome 官网：http://fortawesome.github.io/Font-Awesome/
简介：让你可以即时定制的可伸缩矢量图标；
公有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