初識font-awesome

最近在學習html和css的時候接觸到了font-awesome，特意整理一些相關知識在這裏，望各位指點補充，不勝感激。

使用方法：

1.到font-awesome官網上下載這套款基於css框架的網頁字體圖標庫，值得一提的是，這款字體圖標庫從下載到應用都是徹底免費的。
2.下載後，解壓源文件。將其中的CSS（樣式文件），fonts（字體）將兩個文件夾拷貝到站點中。
3.在HMTL文件中，在head部分引入CSS(發佈使用min（壓縮版本），若是調試可使用未壓縮的）。代碼實例以下：<link rel="stylesheet" href="./css/font-awesome.min.css">
4.有了以上的操做，接下來咱們就能夠在界面設計中使用這套字體圖標了。如，在html主體部分直接在i標籤對內使用css類fa fa-[icon],此處icon表明了相應的圖標類，如：<i class="fa fa-search"></i>，就能夠在界面裏呈現出一個搜索圖標。

優點

1. 一個字庫，675個圖標
   僅一個Font Awesome字庫，就包含了與網頁相關的全部形象圖標。
2. 無需依賴JavaScript
   Font Awesome徹底不依賴JavaScript，所以無需擔憂兼容性。
3. 無限縮放
   不管在任何尺寸下，可縮放的矢量圖形都會爲您呈現出完美的圖標。
4. 如言語通常自由
   Font Awesome徹底免費，哪怕是商業用途。請查看許可。
5. CSS控制
   只要CSS支持，不管顏色、大小、陰影或者其它任何效果，均可以輕易展示。
6. 高分屏完美呈現
   Font Awesome的矢量圖標，將使您的網站在視網膜級的高分屏上大放異彩。
7. 完美兼容其它框架
   儘管是爲Bootstrap設計，但Font Awesome一樣能與其它框架完美協同運做。
8. 可適配於屏幕閱讀器
   與其它字體不一樣，Font Awesome不會影響屏幕閱讀器正常工做。

注：不兼容IE7

使用實例

1. 基本圖標
   您能夠將Font Awesome圖標使用在幾乎任何地方，只須要使用CSS前綴 fa ，再加上 圖標名稱。 Font Awesome是爲使用內聯元素而設計的。咱們一般更喜歡使用 <i> ，由於它更簡潔。 但實際上使用 <span> 才能更加語義化。
2. 大圖標
   使用 fa-lg (33%遞增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 類 來放大圖標。固定寬度.使用 fa-fw 能夠將圖標設置爲一個固定寬度。主要用於不一樣寬度圖標沒法對齊的狀況。 尤爲在列表或導航時起到重要做用。
3. 用於列表
   使用 fa-ul 和 fa-li 即可以簡單的將無序列表的默認符號替換掉。
4. 邊框與對齊
   使用 fa-border 以及 pull-right 或 pull-left 能夠輕易構造出引用的特殊效果。
5. 動畫
   使用 fa-spin 類來使任意圖標旋轉，如今您還可使用 fa-pulse 來使其進行8方位旋轉。尤爲適合 fa-spinner、fa-refresh 和 fa-cog
6. 旋轉與翻轉
   使用 fa-rotate- 和 fa-flip- 類能夠對圖標進行任意旋轉和翻轉。
7. 組合使用 若是想要將多個圖標組合起來，使用 fa-stack 類做爲父容器， fa-stack-1x 做爲正常比例的圖標， fa-stack-2x 做爲大一些的圖標。還可使用 fa-inverse 類來切換