Fontawesome字體使用說明及其經常使用效果語法

本文主要介紹如何在咱們的站點裏引入Footawesome字體，而且介紹一些Fontawesome字體經常使用的一些使用方法。
下面是整理的一下使用心得。

如何在站點中引入Fontawesome字體

1. Footawesome官網，點擊DownLoad下載 資源文件。

2. 解壓源文件，源文件以下圖。將CSS（樣式文件），fonts（字體）將兩個文件夾拷貝到站點中。

3. 在HMTL文件中，引入CSS(發佈使用min（壓縮版本），調試能夠使用未壓縮的） ，如：
   

<!-- font-awesome的相對路徑 -->
    <link rel="stylesheet" href="css/font-awesome.min.css">

這樣咱們即可以在UI中，使用Foot-awesome圖標了。

footawesome使用實例

下面的實例是引用 crper大神寫的demo，在這兒借用此實例作一個經常使用用法的介紹。

基礎用法

在標籤中，使用 css類 fa fa-[icon] ,此處icon 表明了相應的圖標類，如： icon-wixin //微信圖標

圖標的規格

icon圖標的大小是 由字體大小決定的，也就說咱們經過font-size來控制icon圖標的大小，font-awesome也提供了對應的規格類大小，更適用。

fa-lg比常規圖標大33%,而2x~5x都是常規圖標大小的倍數（fa-2x,fa-3x）

圖標固定大小

使用 fa-fw類

圖標邊框及圖標移動

• pull-left : 控制圖標在佔據左側
• pull-right ： 控制圖標占據右側

• fa-border : 圖標邊框

圖標動畫

下面的知識點厲害了，想不想不經過JS，就讓圖標動起來？ font-awesome就能夠實現，僅僅一個css類，就能夠讓咱們的圖標動起來。

下面介紹兩個css類：

fa-spin ：
spin的速度是linear(勻速),一圈2s
fa-fa-pulse ：
pulse分爲八步(圖標分8次轉完一圈),一圈時間1S

圖標動畫實例：

<div class="icon-test-list">
      <h1>圖標動畫</h1>
      <ul>
        <li><i class="fa fa-spin fa-2x fa-arrow-right"></i> fa-arrow-right-勻速旋轉,2s一圈</li>
        <li><i class="fa fa-spin fa-2x fa-spinner fa-pulse"></i>fa-spinner--一圈分爲八次轉完,時間1S</li>
      </ul>
    </div>

    <!-- 在less裏面定義 spin的速度是linear(勻速),一圈2s pulse分爲八步,一圈時間1S -->

圖標旋轉

fa-rotate-*:來控制旋轉的度數
fa-flip-*: 兩個參數來控制水平和垂直

例如：

<!--偏移角度只能是90°的倍數-->
fa-rotate-90
fa-rotate-180
fa-rotate-360

<!--垂直與水平-->
fa-flip-horizontal
fa-flip-vertical

圖標堆疊 ，圖標合併

最讓人吃驚的是這一個了，圖標居然還能湊在一塊兒，以下圖：都是拼接起來的，忽然就想起小時候玩過的那些「七巧板」，「魔尺」之類的玩具。

使用語法：

要多添加一個 fa-stack類，然後以此加上要堆疊的圖標

fa-stack做爲父,組合子元素生成的對象;能夠使用規格參數
fa-stack-2x 做爲背景的棧,要大於顯示圖形的棧
fa-stack-1x 做爲背景棧內部的內容,因此要小於背景棧
fa-inverse 用來反轉圖標顏色,生成可見圖標組

使用實例

<li>
  <span class="fa-stack fa-3x">
     <i class="fa fa-stack-1x fa-chain"></i>
     <i class="fa fa-stack-2x fa-circle-o "></i>
   </span>隨便找的兩個圖標合成
 </li>

以上實例代碼，引用網上博文，詳情見： 引用參考

引用參考

Font-Awesome最新版完整使用教程