content: "\f015";自帶常見圖示icon
阿新 • • 發佈：2019-01-29
簡介：讓你可以即時定製的可伸縮向量圖示；
公有302種圖示任你選擇；
圖示的風格，如：大小、顏色、陰影可以通過css樣式修改；
支援ie6、7；
example:
<!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>