跳至内容
Font Awesome 文档
Web Awesome 闪亮登场，这是规模最大、功能最强大的开源 Web 组件库。
立即预订！

深入了解

您可以通过进一步了解我们加载图标并进行微调以满足您特定需求的幕后操作，将 Font Awesome 与 Vue 的结合提升到新的高度。

设置默认样式

要设置默认样式，请确保您在 Vue 应用中安装了以下内容：

  1. Font Awesome SVG 核心
  2. 至少一个 Font Awesome 图标包
  3. Font Awesome Vue 组件

在 main.js 文件中，将 config.styleDefault 设置为您选择的样式

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, config } 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'


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


/* set the default style to something other than classic solid */
config.styleDefault = "duotone";


const app = createApp(App)


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


app.mount('#app')

现在，您已准备好添加图标，并使用您设置的默认样式进行渲染（在本例中为双色调）。

// no need to specify the style again, it was set in the main.js file - these icons will all render using the Duotone style
<font-awesome-icon icon="fish" />
<font-awesome-icon icon="frog" size="sm" bounce />
<font-awesome-icon icon="dog" size="3x" />
<font-awesome-icon icon="cat" size="2x" flip="horizontal" />

性能

我们一直致力于使 Font Awesome 尽可能地高效轻便 - 通过将样式拆分、使用树状摇动、将代码保持尽可能轻量 - 但您可能对项目有特定需求，而这些技巧可以派上用场。

树状摇动

当使用 import { faCoffee } 时，保持捆绑包较小依赖于树状摇动。如果您没有使用支持树状摇动的工具，最终可能会捆绑比您预期的更多图标。

如果树状摇动没有自动为您工作，这里提供了一种替代的导入语法。

import { library } from "@fortawesome/fontawesome-svg-core";
import { faCoffee } from "@fortawesome/free-solid-svg-icons/faCoffee";
import { faSpinner } from "@fortawesome/pro-light-svg-icons/faSpinner";


library.add(faCoffee, faSpinner);

请注意，图标名称在每行末尾再次添加。这是如何工作的？我们有像 node_modules/@fortawesome/free-solid-svg-icons/faCoffee.js 这样的单个图标文件，其中只包含该特定图标。

导入整个样式

如果您在一个样式中使用大量图标，可以导入整个样式 - 但请谨慎使用，因为它可能包含数千个图标。

import { fas } from "@fortawesome/free-solid-svg-icons";


library.add(fas);

这会将整套免费实心样式图标添加到您的库中。请谨慎使用这种方法，因为它在开始时可能很方便，但您的捆绑包大小会很大。我们强烈建议您利用树状摇动进行子集化。

高级添加图标

计算属性

您可以通过计算属性显式地定义一个图标。

<script setup lang="tsx">
import { ref, reactive, computed } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faSquare, faSquareCheck } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'


const buttonIcon = computed(() => {
  return faSquare
})
</script>


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

备用组件属性

使用 Vue，您可以告诉您的组件显式地解析另一个组件。

<script setup lang="tsx">
import { ref, reactive, computed } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faSquare, faSquareCheck } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'


const checked = ref(false)


const buttonIcon = computed(() => {
  return (checked.value)
    ? faSquareCheck
    : faSquare
})


function toggleButton () {
  checked.value = !checked.value
}
</script>


<template>
  <FontAwesomeIcon :icon="buttonIcon" @click="toggleButton" />
</template>

了解更多

为什么需要库？

显式地选择图标的优点是，您最终捆绑的文件中只包含了您使用的图标。这使我们能够将 Font Awesome 的数千个图标子集化，只保留平均应用程序或项目中使用的少量图标。

Font Awesome Javascript API

您渴望了解更多知识吗？您可以深入了解我们的 Font Awesome SVG 核心 和 Javascript API 文档。