跳过至内容
Font Awesome 文档
欢迎 Web Awesome，最大最好的开源 Web 组件库。
今天预购！

样式速查表

需要查找特定的 CSS 类或自定义属性吗？忘记特定的样式实用程序类是什么了？这里有一个快速参考，其中包含 Font Awesome 样式工具包中的所有内容。

常规

类详细信息
fa-inverse将图标颜色反转为白色
CSS 自定义属性详细信息可接受的值
--fa-style-family设置 Font Awesome 图标系列"Font Awesome 6 免费"
"Font Awesome 6 专业版"
"Font Awesome 6 双色调"
"Font Awesome 6 品牌"
"Font Awesome 6 锐利"
--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 坐标任何有效的 CSS number 值，介于 0 和 1 之间
--fa-flip-y设置 fa-flip 图标的表示旋转轴的矢量的 y 坐标任何有效的 CSS number 值，介于 0 和 1 之间
--fa-flip-z设置 fa-flip 图标的表示旋转轴的矢量的 z 坐标任何有效的 CSS number 值，介于 0 和 1 之间
--fa-flip-angle设置 fa-flip 图标的旋转角度。正角度表示顺时针旋转，负角度表示逆时针旋转。任何有效的 CSS 角度 值

带边框的图标

类详细信息
fa-border在图标周围创建 border，并应用 border-radius 和 padding
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 框架时可用。所有增长、缩小和定位实用程序都接受任意值（包括小数）。它们的单位是 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在伪元素自定义 CSS 规则中设置 font 属性以使用实心样式 (font-family 和 font-weight)。
--fa-font-regular在伪元素自定义 CSS 规则中设置 font 属性以使用常规样式 (font-family 和 font-weight)。
--fa-font-light在伪元素自定义 CSS 规则中设置 font 属性以使用实心样式 (font-family 和 font-weight)。
--fa-font-thin在伪元素自定义 CSS 规则中设置 font 属性以使用细体样式 (font-family 和 font-weight)。
--fa-font-duotone在伪元素自定义 CSS 规则中设置 font 属性以使用双色调样式 (font-family 和 font-weight)。
--fa-font-brands在伪元素自定义 CSS 规则中设置 font 属性以使用品牌样式 (font-family 和 font-weight)。
--fa-font-sharp-solid在伪元素自定义 CSS 规则中设置 font 属性以使用尖锐系列和实心样式 (font-family 和 font-weight)。
--fa-font-sharp-regular在伪元素自定义 CSS 规则中设置 font 属性以使用尖锐系列和常规样式 (font-family 和 font-weight)。
--fa-font-sharp-light在伪元素自定义 CSS 规则中设置 font 属性以使用尖锐系列和轻体样式 (font-family 和 font-weight)。
--fa-font-sharp-thin在伪元素自定义 CSS 规则中设置 font 属性以使用尖锐系列和细体样式 (font-family 和 font-weight)。