跳到内容
Font Awesome 文档
Web Awesome 问好，这是最大最好的开源 Web 组件库。
今天预购！

使用 React 添加图标样式

Font Awesome 拥有大量与我们的图标配合使用的出色样式工具，使您的项目看起来更出色。

当使用 React 时，整个 Font Awesome 样式工具包 可用，但语法与我们的一般 Web 使用文档不同。在下面，您将找到使用 React 添加样式的语法，以及指向包含每个样式工具的描述和示例的一般文档的链接。

尺寸

Font Awesome 支持从 2xs 到 2xl 的 T 恤尺寸比例，以及从 1x 到 10x 的文字大小。

/* T-shirt sizes */
<FontAwesomeIcon icon="fa-solid fa-coffee" size="xs" />
<FontAwesomeIcon icon="fa-solid fa-coffee" size="lg" />


/* X-factor sizing */
<FontAwesomeIcon icon="fa-solid fa-coffee" size="6x" />

请记住，您始终可以使用 CSS font-size 属性直接控制图标大小。 FontAwesomeIcon 的 size 属性根据当前上下文中的字体大小确定图标大小。

固定宽度

当您尝试将图标对齐到垂直列中时，将图标设置为使用固定宽度会很有帮助。

<FontAwesomeIcon icon="fa-solid fa-coffee" fixedWidth />

列表中的图标

 

<FontAwesomeIcon icon="fa-solid fa-coffee" listItem />

旋转和翻转图标

以四分之一圈为单位旋转并水平、垂直或同时翻转。或者尝试使用 强大的变换 细化控制。

/* Rotate */
<FontAwesomeIcon icon="fa-solid fa-coffee" rotation={90} />
<FontAwesomeIcon icon="fa-solid fa-coffee" rotation={180} />
<FontAwesomeIcon icon="fa-solid fa-coffee" rotation={270} />


/* Flip */
<FontAwesomeIcon icon="fa-solid fa-coffee" flip="horizontal" />
<FontAwesomeIcon icon="fa-solid fa-coffee" flip="vertical" />
<FontAwesomeIcon icon="fa-solid fa-coffee" flip="both" />

动画图标

您可以使用动画实用程序来指示加载或处理，尤其是在与 spinner 或 sync 等图标配对时。 spin 实用程序会使图标顺时针平滑旋转， pulse 实用程序会顺时针分八步旋转。

<FontAwesomeIcon icon="fa-solid fa-heart" beat />
<FontAwesomeIcon icon="fa-solid fa-circle-info" beatFade />
<FontAwesomeIcon icon="fa-solid fa-basketball" bounce />
<FontAwesomeIcon icon="fa-solid fa-triangle-exclamation" fade />
<FontAwesomeIcon icon="fa-solid fa-compact-disc" flip />
<FontAwesomeIcon icon="fa-solid fa-bell" shake />
<FontAwesomeIcon icon="fa-solid fa-cog" spin />
<FontAwesomeIcon icon="fa-solid fa-compass" spin spinReverse />
<FontAwesomeIcon icon="fa-solid fa-spinner" spinPulse />

我们还在 CSS 自定义属性 中内置了一些动画实用程序。

带边框的图标

使用此实用程序在图标周围添加边框。

<FontAwesomeIcon icon="fa-solid fa-coffee" border />

拉伸的图标

使用此实用程序将文本包裹在图标周围。

<FontAwesomeIcon icon="fa-solid fa-coffee" pull="left" />
<FontAwesomeIcon icon="fa-solid fa-coffee" pull="right" />

强大的变换

强大的变换的确很强大！您可以使用此样式工具来缩放、定位、旋转和翻转图标。

  • 要缩放图标，请使用 grow-# 和 shrink-#，并使用任何任意值，包括小数。
  • 要移动图标，请使用 up-#、down-#、left-# 和 right-#，并使用任何任意值，包括小数。
  • 要旋转或翻转图标，请使用 flip-v、flip-h 或 rotate-# 的任意组合，并使用任何任意值。
/* Use basic utilites */
<FontAwesomeIcon icon="fa-solid fa-coffee" transform="shrink-6 left-4" />


/* Or computed */
<FontAwesomeIcon icon="fa-solid fa-coffee" transform={{ rotate: 42 }} />

蒙版

当您想要分层两个图标，但使内部图标从下面的图标中剪切出来，以显示父元素的背景时，可以使用蒙版实用程序。

<FontAwesomeIcon icon="fa-solid fa-coffee" mask="fa-regular fa-circle" />

双色调图标

对于双色调图标，您可以交换层上的不透明度。

<FontAwesomeIcon icon="fa-duotone fa-coffee" swapOpacity />

我们还在 CSS 自定义属性 中内置了大量用于双色调图标的实用程序。

使用 SVG 符号

<FontAwesomeIcon icon="fa-solid fa-coffee" symbol />
<FontAwesomeIcon icon="fa-solid fa-coffee" symbol="beverage-icon" />

分层

您可以使用分层实用程序来分层图标、文本或添加计数器。您还可以反转图标以获得剪切效果。

分层图标

分层一个或多个图标以创建一个新图标。包含 fixed-width 以使层对齐。

<span className="fa-layers fa-fw fa-lg">
  <FontAwesomeIcon icon="fa-solid fa-circle" />
  <FontAwesomeIcon icon="fa-solid fa-check" transform="shrink-6" inverse />
</span>

将图标颜色反转为白色

这在分层图标时或单独使用时都非常有用。

<FontAwesomeIcon icon="fa-solid fa-coffee" inverse />

添加您自己的 CSS 类

您可以使用 className 属性将您自己的项目目的和样式添加到任何组件。

<FontAwesomeIcon icon="fa-solid fa-spinner" className="highlight" />