Font Awesome使用教程
完美的圖示字只為Bootstrap設計
操作方法
(01)拷貝 Font Awesome 字型目錄到你的專案中。
(02) 檔案到你的專案中。
(03)開啟你的專案中的 檔案並編輯字型路徑指向正確的位置。
(04)在html文件中的 <head> 部分,引入 檔案。<link rel="stylesheet" href="../css/"><link rel="stylesheet" href="../css/">
(05)在瀏覽器中開啟頁面,檢查是否正確啟用了 Font Awesome!
(06)需要支援 IE7 瀏覽器?<link rel="stylesheet" href="../css/"><link rel="stylesheet" href="../css/"><!--[if IE 7]><link rel="stylesheet" href="assets/css/"><![endif]-->
(07)引用影象<i class="icon-camera-retro"></i> icon-camera-retro
(08)通過給圖示設定icon-large、icon-2x、icon-3x 或 icon-4x 樣式,可以讓圖示相對於它所在的容器變得更大。<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p><p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p><p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p><p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
(09)讓影象動起來<i class="icon-spinner icon-spin"></i>
特別提示
每個圖示都是重新制作的,並且針對Bootstrap的預設14px字號做了最大的優化。
我們遵循 SIL 開放字型協議,程式碼遵循 MIT 協議。沒有過多的束縛,帶給你更多自由。
雖然增加了 16% 的圖示,3.0 版本的體積卻變得更小了。 Font Awesome 還可以定製,將你不需要的圖示去掉。