酷知百科網

請輸入關鍵字詞

熱門搜尋排行

位置：首頁 > 遊戲數碼 > 互聯網

Font Awesome使用教程

互聯網2.13W

完美的圖標字只爲Bootstrap設計

操作方法

（01）拷貝 Font Awesome 字型目錄到你的項目中。

Font Awesome使用教程

（02） 檔案到你的項目中。

（03）開啟你的項目中的 檔案並編輯字型路徑指向正確的位置。

（04）在html文檔中的 <head> 部分，引入 檔案。<link rel="stylesheet" href="../css/"><link rel="stylesheet" href="../css/">

Font Awesome使用教程 第2張

（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]-->

Font Awesome使用教程 第3張

（07）引用圖像<i class="icon-camera-retro"></i> icon-camera-retro

Font Awesome使用教程 第4張

（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>

Font Awesome使用教程 第5張

（09）讓圖像動起來<i class="icon-spinner icon-spin"></i>

Font Awesome使用教程 第6張

特別提示

每個圖標都是重新制作的，並且針對Bootstrap的默認14px字號做了最大的優化。

我們遵循 SIL 開放字型協議，代碼遵循 MIT 協議。沒有過多的束縛，帶給你更多自由。

雖然增加了 16% 的圖標，3.0 版本的體積卻變得更小了。 Font Awesome 還可以定製，將你不需要的圖標去掉。

標籤：Font Awesome Awesome使用教程

相關文章