跳至内容
Font Awesome 文档
欢迎 Web Awesome，最棒、最大的开源 Web 组件库。
立即预订！

使用 Vue 添加图标样式

Font Awesome 拥有大量很棒的样式工具，它们与我们的图标协同工作，使您的项目外观尽善尽美。

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

大小

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

<!-- T-shirt sizes -->
<font-awesome-icon icon="fa-solid fa-coffee" size="xs" />
<font-awesome-icon icon="fa-solid fa-coffee" size="lg" />


<!-- X-factor sizing -->


<font-awesome-icon icon="fa-solid fa-coffee" size="6x" />

请记住，您始终可以使用 CSS font-size 属性直接控制图标大小。 font-awesome-icon 的大小属性决定了相对于当前上下文字体大小的图标大小。

固定宽度

将图标设置为使用固定宽度有助于您在垂直列中对齐图标时。

<font-awesome-icon icon="fa-solid fa-coffee" fixed-width />

列表中的图标

没有针对在列表中使用图标的 Vue 特定语法，因此您可以使用 fa-ul 和 fa-li 来 替换无序列表中的默认项目符号，就像往常一样。

旋转和翻转图标

按四分之一圈旋转并水平、垂直或同时翻转。或尝试 强大转换 以获得更多粒度控制。

<!-- Rotate -->
<font-awesome-icon icon="fa-solid fa-coffee" rotation="90" />
<font-awesome-icon icon="fa-solid fa-coffee" rotation="180" />
<font-awesome-icon icon="fa-solid fa-coffee" rotation="270" />


<!-- Mirror -->


<font-awesome-icon icon="fa-solid fa-coffee" flip="horizontal" />
<font-awesome-icon icon="fa-solid fa-coffee" flip="vertical" />
<font-awesome-icon icon="fa-solid fa-coffee" flip="both" />

动画图标

您可以使用动画实用程序作为指示加载或处理的方式，尤其是在与 spinner 或 sync 等图标搭配使用时。 spin 实用程序会使图标顺时针平滑旋转，而 pulse 实用程序会以八个步骤顺时针旋转。

<font-awesome-icon icon="fa-solid fa-heart" beat />
<font-awesome-icon icon="fa-solid fa-circle-info" beat-fade />
<font-awesome-icon icon="fa-solid fa-basketball" bounce />
<font-awesome-icon icon="fa-solid fa-triangle-exclamation" fade />
<font-awesome-icon icon="fa-solid fa-compact-disc" flip />
<font-awesome-icon icon="fa-solid fa-bell" shake />
<font-awesome-icon icon="fa-solid fa-cog" spin />
<font-awesome-icon icon="fa-solid fa-compass" spin spin-reverse />
<font-awesome-icon icon="fa-solid fa-spinner" spin-pulse />

我们还将一些 动画实用程序构建到 CSS 自定义属性 中。

带边框的图标

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

<font-awesome-icon icon="fa-solid fa-coffee" border />

拉伸的图标

使用此实用程序将文本环绕图标。

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

强大转换

强大转换名副其实 - 非常强大！您可以使用此样式工具来缩放、定位、旋转和翻转。

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

蒙版

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

<!-- using transform with mask will allow you to scale, shrink, grow, etc. the coffee icon within the circle icon -->
<font-awesome-icon icon="fa-solid fa-coffee" transform="shrink-7" mask="fa-solid fa-circle" />

双色调图标

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

<font-awesome-icon icon="fa-duotone fa-coffee-pot" swap-opacity />

我们还在 CSS 自定义属性 中为双色调图标构建了许多实用程序。

图层

如果您想要分层图标、在图标上方添加文本层或向图标添加计数器，则需要添加分层组件。将您的 main.js 修改为如下所示

// Using Vue 2.x
import Vue from 'vue'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'


Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText)

然后，您可以使用这些组件中的实用程序来分层图标、文本或添加计数器。您还可以反转图标以获得剪切效果。

图层图标

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

<font-awesome-layers class="fa-lg">
  <font-awesome-icon icon="fa-solid fa-circle" />
  <font-awesome-icon icon="fa-solid fa-check" transform="shrink-6" :style="{ color: 'white' }" />
</font-awesome-layers>

图层文本

在图标上方添加文本。使用强大转换来控制文本的显示方式。

<font-awesome-layers full-width class="fa-4x">
  <font-awesome-icon icon="fa-solid fa-badge"/>
  <font-awesome-layers-text class="gray8" transform="down-2 shrink-8" value="New!" />
</font-awesome-layers>

添加计数器

在图标的角落添加计数器。位置可以是 bottom-left、bottom-right、top-left 以及默认的 top-right。

<font-awesome-layers full-width class="fa-4x">
  <font-awesome-icon icon="fa-solid fa-envelope" />
  <font-awesome-layers-text counter value="1" position="top-right" />
</font-awesome-layers>

将图标颜色反转为白色

这在分层图标时很有用，或者单独使用时也很有用。

<font-awesome-icon icon="fa-solid fa-coffee" inverse />