跳到內容
Font Awesome 文件
歡迎使用 Web Awesome，這是最大且最好的開源網路元件庫。
立即預訂！

樣式秘笈

需要查詢特定的 CSS 類別或自訂屬性嗎？忘記了特定的樣式公用程式類別的作用嗎？以下是 Font Awesome 造型工具組中所有內容的快速參考。

一般

類別詳細資料
fa-inverse將圖示的顏色反轉為白色
CSS 自訂屬性詳細資料可接受的值
--fa-style-family設定 Font Awesome 圖示家族"Font Awesome 6 Free"
"Font Awesome 6 Pro"
"Font Awesome 6 Duotone"
"Font Awesome 6 Brands"
"Font Awesome 6 Sharp"
--fa-style設定 Font Awesome 圖示樣式任何有效的 Font Awesome 樣式粗細
--fa-display設定圖示的顯示方式任何有效的 CSS display 值
--fa-inverse設定反轉圖示的顏色任何有效的 CSS color 值

調整圖示大小

類別詳細資料
fa-1x將圖示的 font-size 變更為 1em
fa-2x將圖示的 font-size 變更為 2em
fa-3x將圖示的 font-size 改為 3em
fa-4x將圖示的 font-size 改為 4em
fa-5x將圖示的 font-size 改為 5em
fa-6x將圖示的 font-size 改為 6em
fa-7x將圖示的 font-size 改為 7em
fa-8x將圖示的 font-size 改為 8em
fa-9x將圖示的 font-size 改為 9em
fa-10x將圖示的 font-size 改為 10em


fa-2xs將圖示的 font-size 改為 0.625em (~10px)，並垂直對齊圖示
fa-xs將圖示的 font-size 改為 .75em (~12px)，並垂直對齊圖示
fa-sm將圖示的 font-size 改為 0.875em (~14px)，並垂直對齊圖示
fa-lg將圖示的 font-size 改為 1.25em (~120px)，並垂直對齊圖示
fa-xl將圖示的 font-size 改為 1.5em (~24px)，並垂直對齊圖示
fa-2xl將圖示的 font-size 改為 2em (~32px)，並垂直對齊圖示

固定寬度的圖示

類別詳細資料
fa-fw將圖示的 font-size 改為 .75em

清單中的圖示

類別詳細資料
fa-ul用在 <ul> 或 <ol> 元素上，將圖示樣式設定為清單項目符號
fa-li用在個別 <li> 元素上，將圖示樣式設定為清單項目符號
CSS 自訂屬性詳細資料可接受的值
--fa-li-margin設定圖示周圍的邊界任何有效的 CSS margin 值
--fa-li-width設定圖示的寬度任何有效的 CSS width 值

旋轉的圖示

類別詳細資料
fa-rotate-90將圖示旋轉 90°
fa-rotate-180將圖示旋轉 180°
fa-rotate-270將圖示旋轉 270°
fa-flip-horizontal將圖示水平鏡射
fa-flip-vertical將圖示垂直鏡射
fa-flip-both將圖示垂直和水平鏡射
fa-rotate-by將圖示旋轉特定角度 - 必須設定 有效 的內嵌值給 --fa-rotate-angle
CSS 自訂屬性詳細資料可接受的值
--fa-rotate-angle設定.fa-rotate-by 的旋轉角度任何有效的 CSS transform 旋轉 值

動畫圖示

類別詳細資料
fa-spin讓圖示順時針旋轉 360°
fa-spin-pulse讓圖示以 8 個遞增步驟順時針旋轉 360°
fa-spin-reverse與 fa-spin 或 fa-spin-pulse 搭配使用時，讓圖示逆時針旋轉
fa-beat讓圖示縮放
fa-fade使用 opacity 讓圖示視覺上淡入淡出
fa-flip讓圖示繞 Y 軸旋轉
CSS 自訂屬性詳細資料可接受的值
--fa-animation-delay設定動畫的初始延遲任何有效的 CSS animation-delay 值
--fa-animation-direction設定動畫的方向任何有效的 CSS animation-direction 值
--fa-animation-duration設定動畫的持續時間任何有效的 CSS animation-duration 值
--fa-animation-iteration-count設定動畫的迭代次數任何有效的 CSS animation-iteration-count 值
--fa-animation-timing設定動畫如何在幀中進行任何有效的 CSS animation-timing-function 值
--fa-beat-scale設定 fa-beat 圖示將縮放的最大值任何有效的 CSS 數字 值
--fa-fade-opacity設定 fa-fade 圖示將淡出的最低不透明度值0 1.0
--fa-beat-fade-opacity設定 fa-beat-fade 圖示將淡入淡出的最低不透明度值0 1.0
--fa-beat-fade-scale設定圖示將縮放的最大值設定 fa-beat-fade 圖示將縮放的最大值
--fa-flip-x設定 fa-flip 圖示表示旋轉軸向量的 x 座標介於 0 和 1 之間的任何有效的 CSS number 值
--fa-flip-y設定 fa-flip 圖示的 y 座標，表示旋轉軸的向量介於 0 和 1 之間的任何有效的 CSS number 值
--fa-flip-z設定 fa-flip 圖示的 z 座標，表示旋轉軸的向量介於 0 和 1 之間的任何有效的 CSS number 值
--fa-flip-angle設定 fa-flip 圖示的旋轉角度。正角度表示順時針旋轉，負角度表示逆時針旋轉。任何有效的 CSS 角度 值

有邊框的圖示

類別詳細資料
fa-border在圖示周圍建立一個套用 border-radius 和 padding 的 border
CSS 自訂屬性詳細資料可接受的值
--fa-border-color設定邊框顏色任何有效的 CSS border-color 值
--fa-border-padding設定圖示周圍的內距任何有效的 CSS padding 值
--fa-border-radius設定邊框半徑任何有效的 CSS border-radius 值
--fa-border-style設定邊框樣式任何有效的 CSS border-style 值
--fa-border-width設定邊框寬度任何有效的 CSS border-width 值

拉出的圖示

類別詳細資料
fa-pull-left透過 浮動將圖示向左拉，並套用 margin-right
fa-pull-right透過 浮動將圖示向右拉，並套用 margin-left
CSS 自訂屬性詳細資料可接受的值
--fa-pull-margin設定圖示周圍的邊界任何有效的 CSS margin 值

堆疊圖示

類別詳細資料
fa-stack用於要堆疊的兩個圖示的父 HTML 元素
fa-stack-1x用於堆疊時應顯示為基本大小的圖示
fa-stack-2x用於堆疊時應顯示為較大的圖示
fa-inverse堆疊時反轉基本大小圖示的顏色
CSS 自訂屬性詳細資料可接受的值
--fa-stack-z-index設定堆疊圖示的 z-index任何有效的 CSS z-index 值
--fa-inverse設定反轉堆疊圖示的顏色任何有效的 CSS color 值

雙色調圖示

類別詳細資料
fa-swap-opacity交換雙色調圖示中每個圖層的預設不透明度
(讓圖示的主要圖層不透明度為 40%，而不是次要圖層)
CSS 自訂屬性詳細資料可接受的值
--fa-primary-color設定主要圖層顏色任何有效的 CSS color 值
--fa-primary-opacity設定主要圖層不透明度0 1.0
--fa-secondary-color設定次要圖層顏色任何有效的 CSS color 值
--fa-secondary-opacity設定次要圖層不透明度0 1.0

無障礙

類別詳細資料
fa-sr-only視覺上隱藏包含圖示文字等效項目的元素，同時讓輔助技術可以存取
fa-sr-only-focusable與 fa-sr-only 一起使用，當元素取得焦點時再次顯示元素（例如，僅鍵盤使用者）

強大轉換

只有在使用 SVG+JS 架構時，才能使用 Power Transforms。所有成長、縮小和定位工具都接受任意值（包括小數）。它們的單位各為 1/16em。

HTML data- 屬性詳細資料
data-fa-transform="shrink-[value]"縮小圖示
data-fa-transform="grow-[value]"放大圖示
data-fa-transform="up-[value]"向上移動圖示
data-fa-transform="right-[value]"向右移動圖示
data-fa-transform="down-[value]"向下移動圖示
data-fa-transform="left-[value]"向左移動圖示
data-fa-transform="rotate-[angle]"以特定角度旋轉圖示（允許負數）
data-fa-transform="flip-h"水平鏡射圖示
data-fa-transform="flip-v"垂直鏡射圖示

偽元素

CSS 自訂屬性詳細資料
--fa-font-solid設定 font 屬性，在偽元素自訂 CSS 規則中使用實心樣式（font-family 和 font-weight）
--fa-font-regular設定 font 屬性，在偽元素自訂 CSS 規則中使用一般樣式（font-family 和 font-weight）
--fa-font-light設定 font 屬性，在偽元素自訂 CSS 規則中使用實心樣式（font-family 和 font-weight）
--fa-font-thin設定 font 屬性，在偽元素自訂 CSS 規則中使用細體樣式（font-family 和 font-weight）
--fa-font-duotone設定 font 屬性，在偽元素自訂 CSS 規則中使用雙色調樣式（font-family 和 font-weight）
--fa-font-brands設定 font 屬性，在偽元素自訂 CSS 規則中使用品牌樣式（font-family 和 font-weight）
--fa-font-sharp-solid設定 font 屬性，在偽元素自訂 CSS 規則中使用 sharp 家族和實心樣式（font-family 和 font-weight）
--fa-font-sharp-regular設定 font 屬性，在偽元素自訂 CSS 規則中使用 sharp 家族和一般樣式（font-family 和 font-weight）
--fa-font-sharp-light設定 font 屬性，在偽元素自訂 CSS 規則中使用 sharp 家族和細體樣式（font-family 和 font-weight）
--fa-font-sharp-thin設定 font 屬性，在偽元素自訂 CSS 規則中使用 sharp 家族和細體樣式（font-family 和 font-weight）