何為Font-Awesome
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
簡言之:可伸縮的圖標(矢量化),高度自定義(大小,顏色,陰影等)
優勢
- 目前圖標總數共有519個;
- 不依賴Javascript
- 矢量圖形,無限縮放
- 免費,可用於商業
- CSS控制樣式,自定義圖標顏色,大小,陰影,一切可能實現的效果
- 支持retina顯示(蘋果retina 屏幕)
- 源於BS框架(最初的目標設計使用方向),現在基本支持主流的框架
- 兼容屏幕閱讀器
- 圖標用到的animation適用於IE8~9
缺點
- 不兼容IE7(不過現在用戶使用主流瀏覽器都慢慢過渡到較新的..所以也不算奇葩)
獲取Font-Awesome
使用方法
本地使用
下載完畢[font-awesome-4.3.0.zip]解壓文件包括以下幾個文件夾:
- CSS — 字體的引入,圖標基礎樣式,大小等
- fonts — CSS需要引用字體文件夾,本地用戶需要安裝內部的
fontawesome-webfont.ttf(CSS引入字體) - less — 各種參數自定義的less文件,用來自定義Font awesome
- sass — 各種參數自定義的sass文件,用來自定義Font awesome
SASS和LESS都是CSS預處理器
把CSS文件夾和fonts復制到網站根目錄(記得安裝字體)即可使用,具體看代碼示例
代碼內含注釋—應該很好理解
建議:用Chrome F12調試,一邊查看注釋一邊折騰更妙