Font Awesome 初級入門指南

一、簡介

Font Awesome 是一款免費且開源的圖標集合，它主要包含大量使用於 Web 上的矢量圖標。這個集合的圖標有標誌、方向、網站和應用程序、控制屏幕某些信息的符號等等，這讓它成為一個完美的技術產品標配。

Font Awesome 使用方式簡單，對於初學者來說是一項好的資源。該圖標集在技術社區非常受歡迎，因為它可以隨意調整圖標大小、顏色和使用API動態加載。

二、安裝使用

使用 font-awesome 最基本的方式是直接用 <link> 標籤將其引入到 <head> 中：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+『 DdEuT/lC7tbLsOt9QrqVRuLzC6Ql『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『『
crossorigin="anonymous">

在引入樣式後，就可以使用 Font Awesome 圖標庫了。以下示例演示如何使用 Font Awesome 中的打電話圖標：

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

Font Awesome 提供了各種圖標，每個圖標都有特定的 CSS 類用於與 HTML 一同使用。使用 Font Awesome 圖標只需要在標籤中添加相應的 CSS 類，同時在命名空間中引用它。

三、常用技巧

1、調整大小

使用 Font Awesome 的可調整大小是其中一項最棒的功能之一。可以通過在圖標框架的父元素上設置不同的 font-size 屬性來定義所需的圖標大小，同時實現高度定製化的目的：

<div style="font-size: 2em;">
    <i class="fas fa-envelope-open-text"></i>
</div>

2、更改顏色

更改圖標的顏色也非常簡單。可以使用 CSS 的 color 屬性來更改 Font Awesome 圖標的顏色。下面的代碼使正在上傳數據的圖標從默認的黑色變為紅色：

<i class="fas fa-spinner" style="color: red"></i>

3、組合圖標

有時候我們需要將多個圖標作為一個組件使用。Font Awesome 允許我們使用不同的標籤和 CSS 類來組合圖標。以下示例演示了如何在放大鏡和搜索圖標之間組合一個「+」：

<span>
  <i class="fas fa-search"></i>
  <i class="fas fa-plus"></i>
  <i class="fas fa-search"></i>
</span>

4、通過API動態加載

Font Awesome 5 提供了內置的 JavaScript API，允許在運行時從主機自動加載圖標。

有兩種方法可以使用 Font Awesome API 動態加載圖標。

方法1：

// 創建一個  元素
var faI = document.createElement('i');
// 添加 fa 和 fa-user 兩個 CSS 類
faI.className = 'fa fa-user';
// 添加 faI 元素到按鈕內
document.querySelector('#my-btn').appendChild(faI);

方法2：

// 使用fa-library 版本的 Font Awesome 5，開始加載
window.FontAwesomeKitConfig = {
  asyncLoading: {
    enabled: true
  }
};

// 創建一個  元素
var faI = document.createElement('i');
// 添加 fa 和 fa-user 兩個 CSS 類
faI.className = 'fas fa-user';
// 添加 faI 元素到按鈕
document.querySelector('#my-btn').appendChild(faI);