Font Awesome 介紹

Font Awesome 是一款非常流行的字體圖標庫。它提供了數千個可自定義的圖標，可用於網站、應用程序和其他數字產品的設計。因為它是基於字體而不是圖像，所以它可以很方便地縮放到任意大小而不失真。

一、基礎用法

在你的 HTML 文件中引入以下代碼：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">

然後，你可以使用以下 HTML 代碼來插入一個具有 Font Awesome 圖標的元素：

  <i class="fas fa-home"></i>

在這個例子中，“fas”代表 Font Awesome Solid，它是 Font Awesome 的主要樣式，“fa-home”則代表“家”這個圖標。而 i 標籤是 Font Awesome 的圖標容器。

你還可以為圖標容器使用其他的 HTML 標籤，比如 span 標籤：

  <span class="fas fa-home"></span>

二、自定義顏色和大小

你可以通過設置以下樣式來自定義 Font Awesome 圖標的顏色和大小：

  .fa-lg       /*1.5倍默認大小*/
  .fa-2x      /*2倍默認大小*/
  .fa-3x      /*3倍默認大小*/
  .fa-4x      /*4倍默認大小*/
  .fa-5x      /*5倍默認大小*/

  .fa-fw      /*固定寬度*/
  
  .fa-spin    /*旋轉動畫*/
  
  .fa-pulse   /*閃爍動畫*/
  
  .fa-border  /*圖標底部有一個外邊框*/
  
  .fa-pull-left  /*向左浮動*/
  
  .fa-pull-right /*向右浮動*/

  .text-primary {
    color: #007bff !important;
  }

  .text-success {
    color: #28a745 !important;
  }

  .text-info {
    color: #17a2b8 !important;
  }

  .text-warning {
    color: #ffc107 !important;
  }

  .text-danger {
    color: #dc3545 !important;
  }

上面的樣式可以應用於 Font Awesome 圖標。示例：

  <i class="fas fa-volume-up fa-lg"></i>
  <i class="fas fa-volume-up fa-2x"></i>
  <i class="fas fa-volume-up fa-3x"></i>
  <i class="fas fa-volume-up fa-4x"></i>
  <i class="fas fa-volume-up fa-5x"></i>

  <i class="fas fa-home fa-fw"></i>

  <i class="fas fa-spinner fa-spin"></i>

  <i class="fas fa-spinner fa-pulse"></i>

  <i class="fas fa-home fa-border"></i>

  <i class="fas fa-home fa-pull-left"></i>
  <i class="fas fa-home fa-pull-right"></i>

  <i class="fas fa-thumbs-up text-primary"></i>
  <i class="fas fa-thumbs-up text-success"></i>
  <i class="fas fa-thumbs-up text-info"></i>
  <i class="fas fa-thumbs-up text-warning"></i>
  <i class="fas fa-thumbs-up text-danger"></i>

三、組合圖標

Font Awesome 還支持將多個圖標組合在一起。你可以使用以下的 HTML 代碼：

  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>

在這個例子中，.fa-stack-2x 將創建一個更大的圓圈，並將它放置在 .fa-stack-1x 的上方（它們都是 font-size: 2em;）。然後我們在 .fa-stack-1x 的圖標中使用了 .fa-inverse 將白色圖標變成黑色。

四、Font Awesome 5 vs Font Awesome 4

Font Awesome 5 與 Font Awesome 4 相比，具有許多新增的功能和圖標。以下是一些常見的新功能：

• 分類。Font Awesome 5 通過大量的類別，更好地分組圖標。例如，您可以從基礎圖標集、品牌圖標集、Web 應用圖標集等中選擇。
• SVG 圖標。Font Awesome 5 引入了可縮放矢量圖標（SVG）格式。這些圖標可以以任何大小和分辨率使用，而不會失真。
• 詳細信息。Font Awesome 5 包含有關每個圖標的詳細信息，例如圖標名稱、詞彙名稱和類別。
• 可回形針樣式。Font Awesome 5 還包括與可回形針相關的樣式，這使得創建類似於 GitHub 的用戶界面非常簡單。

同時，Font Awesome 5 的一些功能不兼容 Font Awesome 4。如果您想將舊項目升級到 Font Awesome 5，請確保您已經升級到最新 HTML 標記並更新所有 CSS 選擇器。

五、結論

Font Awesome 是一種流行的字體圖標庫，提供了數千個圖標可供選擇，並支持定製顏色、大小和樣式。與其他圖像圖標不同，Font Awesome 可以很好地縮放到任何大小而不失真，並改進了圖標分類，SVG 圖標以及信息詳細度。無論您是開發 Web 應用程序還是其他數字產品，使用 Font Awesome 都將為您帶來極大的幫助。