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最新版完整使用教程