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

使用 Vue 添加图标

在使用 vue-cli 配置的项目中添加图标时，您需要先创建一个图标库，然后您可以在 UI 中的任何位置调用它们。

使用工具包包

如果您已 创建了一个工具包并将其安装 到您的项目中，那么您就可以开始使用了。

按前缀和名称

<script setup lang="ts">
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { byPrefixAndName } from '@awesome.me/kit-KIT_CODE/icons'
</script>


<template>
  <FontAwesomeIcon :icon="byPrefixAndName.fas['house']" />
</template>

为了使此功能正常工作，您需要一个包含示例中图标的工具包。如果您不熟悉工具包的工作原理，您可以在这里了解。

导入特定图标

除了使用前缀和名称之外，还可以直接导入图标。如果您需要，这是利用摇树优化的最佳方法。

<script setup lang="ts">
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'
</script>


<template>
  <FontAwesomeIcon :icon="faHouse" />
</template>

您也可以使用一个系列和样式中的所有图标。但这将阻止摇树优化（可能吗？我们是否正在为此使用人工智能？）。

<script setup lang="ts">
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { fas, far, fal } from '@awesome.me/kit-KIT_CODE/icons'
</script>


<template>
  <FontAwesomeIcon :icon="fas.faHouse" />
  <FontAwesomeIcon :icon="far.faMouse" />
  <FontAwesomeIcon :icon="fal.faCheese" />
</template>

使用库

SVG 核心 提供的另一个机制是称为 Library 的 JavaScript 类。

使用子集工具包，这是一种简单的方法，可以一次添加所有图标，并使用语法，减少输入量。

import './assets/main.css'


import { createApp } from 'vue'
import { createPinia } from 'pinia'


import App from './App.vue'
import router from './router'


/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'


/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'


/* import specific icons */
import { all } from '@awesome.me/kit-KIT_CODE/icons'


/* add icons to the library */
library.add(...all)


const app = createApp(App)


app.component('font-awesome-icon', FontAwesomeIcon)
app.use(createPinia())
app.use(router)


app.mount('#app')

现在工具包中的所有图标都已在一行代码中添加。轻松便捷。

使用它不需要导入图标。您只需要一个数组或字符串即可。

这里还需要注意的是，我们不再直接导入和使用 FontAwesomeIcon，而是通过 app.component() 使用已注册的组件。这意味着我们的语法略有变化，现在使用 <font-awesome-icon ...>。

<template>
  <font-awesome-icon icon={['fas', 'house']} />
</template>

自定义图标同样容易。

<template>
  <font-awesome-icon icon={['fak', 'my-icon']} />
</template>

添加一些样式

现在您已经在页面上添加了一些图标，添加一些花哨的东西吧！查看您可以使用 Font Awesome 和 React 的所有样式选项。

通过一些样式来表达自己！

从 SVG 图标包导入

如果您不能或不想使用工具包，可以显式地将单个图标添加到每个组件。以下是一个简单的示例

显式添加单个图标

<script setup lang="ts">
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
</script>


<template>
  <FontAwesomeIcon icon={faEnvelope} />
</template>

请注意，faEnvelope 图标是从 @fortawesome/free-solid-svg-icons 作为对象导入的，然后作为对象提供给 icon 属性。

全局添加图标

我们喜欢轻装旅行，因此我们不建议使用此方法，除非您知道自己在做什么。全局导入图标可能会增加捆绑包的大小，其中包含您没有使用的图标。它还会将您的组件耦合到另一个管理您的图标的模块。

首先，您需要通过 React 应用程序的初始化模块（如 App.js）中的“库”导入要使用的图标。以下是一个示例

<script setup lang="ts">
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { faTwitter, faFontAwesome } from '@fortawesome/free-brands-svg-icons'
import { faHatCowboy } from '@fortawesome/pro-thin-svg-icons'
import { faHatChef } from '@fortawesome/sharp-solid-svg-icons'
import { faPlateUtensils } from '@fortawesome/sharp-regular-svg-icons'


library.add(fas, faTwitter, faFontAwesome, faHatCowboy, faHatChef, faPlateUtensils)
<script>

在我们的 library.add() 调用中，我们传递了

  • fas：代表 @fortawesome/free-solid-svg-icons 中的所有图标。（小心导入整个样式 - 可能会有很多图标！）因此，该包中的任何图标都可以通过图标名称作为字符串在应用程序中的其他任何位置引用。例如：coffee、check-square 或 spinner。
  • faTwitter、faFontAwesome、faHatCowboy、faHatChef 和 faPlateUtensils：单独添加这些图标可以让我们在整个应用程序中通过其图标字符串名称（twitter、font-awesome、hat-cowboy、hat-chef 和 plate-utensils）来引用它们。

然后，您可以在应用程序中的任何位置使用这些图标，而无需在每个组件中重新导入。因此，如果您在几个组件中使用了图标，最终会得到类似这样的代码

<script setup lang="ts">
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
<script>


<template>
  <FontAwesomeIcon icon="fa-solid fa-check-square" />
  <FontAwesomeIcon icon="fa-regular fa-coffee" />
</template>
<script setup lang="ts">
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
</script>


<template>
  <FontAwesomeIcon icon="fa-brands fa-twitter" />
  <FontAwesomeIcon icon="fa-brands fa-font-awesome" />
<template>

您会注意到，我们能够使用导入的品牌图标，而无需在组件中显式导入它们。并且我们在没有在任何地方显式导入的情况下使用了 square-check 和 envelope 图标。但是，我们的捆绑包现在包含 **1000 多个实心图标，加上我们添加的两个品牌图标**，这比我们实际使用的要多 - 这是 避免导入整个样式 的一个好理由。

相同的图标，不同的样式

使用 ES 模块和 import 语句，我们可以为同一个图标的两种不同样式定义唯一的名称。以下是一个示例

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee as fasFaCoffee } from '@fortawesome/pro-solid-svg-icons'
import { faCoffee as farFaCoffee } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee as falFaCoffee } from '@fortawesome/pro-light-svg-icons'
import { faCoffee as fatFaCoffee } from '@fortawesome/pro-thin-svg-icons'
import { faCoffee as fadFaCoffee } from '@fortawesome/pro-duotone-svg-icons'
import { faCoffee as fassFaCoffee } from '@fortawesome/sharp-solid-svg-icons'
import { faCoffee as fasrFaCoffee } from '@fortawesome/sharp-regular-svg-icons'
import { faCoffee as faslFaCoffee } from '@fortawesome/sharp-light-svg-icons'
import { faCoffee as fastFaCoffee } from '@fortawesome/sharp-thin-svg-icons'


library.add(fasFaCoffee, farFaCoffee, falFaCoffee, fatFaCoffee, fadFaCoffee, fassFaCoffee, fasrFaCoffee, faslFaCoffee, fastFaCoffee)

将图标添加到您的组件。

<font-awesome-icon icon="fa-solid fa-coffee" />
<font-awesome-icon icon="fa-regular fa-coffee" />
<font-awesome-icon icon="fa-light fa-coffee" />
<font-awesome-icon icon="fa-thin fa-coffee" />
<font-awesome-icon icon="fa-duotone fa-coffee" />
<font-awesome-icon icon="fa-sharp fa-solid fa-coffee" />
<font-awesome-icon icon="fa-sharp fa-regular fa-coffee" />
<font-awesome-icon icon="fa-sharp fa-light fa-coffee" />
<font-awesome-icon icon="fa-sharp fa-thin fa-coffee" />

注意 HTML 中的自闭合标签

如果您使用的是内联模板或 HTML 作为模板，则需要注意避免自闭合标签。有关 Vue.js 上的自闭合标签 的更多信息，请阅读。如果您编写此类模板，则需要调整语法以使其成为有效的 HTML，例如

<!-- Add Icons using String format -->
<font-awesome-icon icon="fa-regular fa-envelope"></font-awesome-icon>