Font Awesome介紹
Font Awesome一套絕佳的圖標字體庫和CSS框架
Font Awesome是一款很流行的字體圖標工具。隨着Bootstrap的流行而逐漸被人所認識,現在FontAwesome不僅僅可以在bt上使用,還可以應用在各種web前端開發中。相對於傳統的使用背景圖片作為圖標,字體圖標主要是支持自適應、可以使用字體的各種特性(比如變色、變大變小、字體陰影等)、減少數據加載、樣式更容易定義等。
Font Awesome 特性
- 一個字體文件, 369 個圖標。
- 不需要JavaScript要求:更快的載入速度
- 無限的可擴展性:可伸縮矢量圖形意味着每一個圖標在任何大小看起來真棒。
- 自由免費:你可以將它應用到你的商業中。
- CSS控制:輕鬆的定義圖標的顏色,大小,陰影,和任何與CSS相關的特性。
- 完美的視網膜顯示:使用矢量字體,這意味着他們可以完美的顯示在高分辨率顯示器中
- 為BootStrap而生:完全的兼容BootStrap新版3.0
- 桌面友好:你可以查看字體的樣式列表
- 兼容屏幕閱讀器:不像其他字體圖標不兼容屏幕閱讀器
Font Awesome的使用
方法1:CDN
直接在 html 文檔頭部引用 CDN 文件即可。
直接搜索最新可用的資源
方法2:下載使用
1)下載解壓文件,包括css和fonts文件夾:css文件夾中有兩個css文件(font-awesome.css和font-awesome.min.css),fonts下有有5個。
2)拷貝到項目中
3)引入樣式文件,如下:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
4)使用
<a href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
資源:
https://fontawesome.dashgame.com/
Font Awesome 中文網:
http://caibaojian.com/fontawesome/get-started.html
https://www.bootcss.com/p/font-awesome/
https://github.com/FortAwesome/Font-Awesome
使用:
然重視此中的src:url()中的路徑是不是當前與當前項目標實際路徑向匹配。
4.最後在頁面中參加響應的html元素,並且遵守font awesome定義好的樣式為須要添加矢量圖標的元素指定樣式。:
別的,font awesome 和BootStrap連絡可以達到更好的結果。