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

標簽： 字體圖標iconfontawesom

Font web開發（17）

版權聲明：本文為博主原創文章，未經博主允許不得轉載。

目錄(?)[+]

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

如何在站點中引入Fontawesome字體

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

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

   

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

    
    <<span class="hljs-title">link rel="stylesheet" href="css/font-awesome.min.css">

• 1
• 2

這樣我們便可以在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

圖標動畫實例：

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

    

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

圖標旋轉

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

例如：

 
fa-rotate-90
fa-rotate-180
fa-rotate-360


fa-flip-horizontal
fa-flip-vertical

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

圖標堆疊 ，圖標合並

最讓人吃驚的是這一個了，圖標竟然還能湊在一起，如下圖：都是拼接起來的，突然就想起小時候玩過的那些“七巧板”，“魔尺”之類的玩具。

使用語法：

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

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

使用實例

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

• 1
• 2
• 3
• 4
• 5
• 6

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

引用參考

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