Font Awesome 5 簡介
Font Awesome 5
Font Awesome 5 擁有 PRO 版，包含 7842 個圖示，以及 FREE 版，包含 1588 個圖示。本教程將重點介紹 FREE 版。
要使用 Font Awesome 5 的免費圖示，您可以選擇下載 Font Awesome 庫，或者註冊一個 Font Awesome 賬戶，並獲取一個程式碼（稱為 KIT CODE），以便在將 Font Awesome 新增到您的網頁時使用。
我們推薦使用 KIT CODE 的方法。一旦您獲得程式碼，您就可以透過僅包含一行 HTML 程式碼來開始在您的網頁中使用 Font Awesome：
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
示例
我們獲得了程式碼 a076d05399，透過插入帶有程式碼的指令碼標籤，我們可以開始使用 Font Awesome。
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-clock"></i>
</body>
</html>
結果顯示
注意：無需下載或安裝！
獲取您自己的 KIT CODE
免費註冊並獲取您自己的程式碼：
fontawesome.comFont Awesome 5 的新特性
Font Awesome 5 新增了 fas 字首，Font Awesome 4 使用的是 fa。
fas 中的 s 代表實心，一些圖示也有常規模式，透過使用字首 far 來指定。
Font Awesome 被設計用於內聯元素。 <i> 和 <span> 元素被廣泛用於圖示。
另請注意，如果您更改圖示容器的字型大小或顏色，圖示也會隨之改變。陰影以及透過 CSS 繼承的其他任何屬性也是如此。
示例
<i class="fas fa-clock" style="font-size:120px;color:#2196F3"></i>
<i class="far fa-clock" style="font-size:120px;color:#2196F3"></i>
結果顯示
調整圖示大小
fa-xs、fa-sm、fa-lg、fa-2x、fa-3x、fa-4x、fa-5x、fa-6x、fa-7x、fa-8x、fa-9x 或 fa-10x 類用於調整圖示相對於其容器的大小。
示例
以下程式碼
<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
<i class="fas fa-clock fa-5x"></i>
<i class="fas fa-clock fa-10x"></i>
結果顯示
列表圖示
fa-ul 和 fa-li 類用於替換無序列表中的預設專案符號。
示例
以下程式碼
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>列表項</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>列表項</li>
<li><span class="fa-li"><i class="fas fa-square"></i></span>列表項</li>
</ul>
結果顯示
動畫圖示
fa-spin 類使任何圖示旋轉，而 fa-pulse 類使任何圖示以 8 個步驟旋轉。
示例
以下程式碼
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i class="fas fa-spinner fa-pulse"></i>
結果顯示
注意：IE8 和 IE9 不支援 CSS3 動畫。
旋轉和翻轉圖示
fa-rotate-* 和 fa-flip-* 類用於旋轉和翻轉圖示。
示例
以下程式碼
<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>
結果顯示
堆疊圖示
要堆疊多個圖示，請在父元素上使用 fa-stack 類，對於常規大小的圖示使用 fa-stack-1x 類，對於較大的圖示使用 fa-stack-2x 類。
fa-inverse 類可用作備用圖示顏色。您還可以向父元素新增較大的圖示類來進一步控制尺寸。
示例
以下程式碼
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter（反色）在 fa-circle（實心）上<br>
<span class="fa-stack fa-lg">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</span>
fa-twitter 在 fa-circle（常規）上<br>
<span class="fa-stack fa-lg">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban 在 fa-camera 上
結果顯示
固定寬度圖示
就像字母和其他字元一樣，圖示可以有不同的寬度，如果您需要在列表中或選單中垂直對齊圖示，這可能會成為一個問題。
fa-fw 類用於設定圖示的固定寬度。
示例
<p>固定寬度：</p>
<div><i class="fas fa-arrows-alt-v fa-fw"></i> 圖示 1</div>
<div><i class="fas fa-band-aid fa-fw"></i> 圖示 2</div>
<div><i class="fab fa-bluetooth-b fa-fw"></i> 圖示 3</div>
<p>無固定寬度：</p>
<div><i class="fas fa-arrows-alt-v"></i> 圖示 1</div>
<div><i class="fas fa-band-aid"></i> 圖示 2</div>
<div><i class="fab fa-bluetooth-b"></i> 圖示 3</div>
結果顯示
自己試試 »
帶邊框和環繞的圖示
fa-border、fa-pull-right 或 fa-pull-left 類用於引語或文章圖示。
示例
以下程式碼
<i class="fas fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
結果顯示
