Nuxt 中 Font Awesome 图标构建后不显示？五步搞定！

vue.js

2024-03-09 21:38:46

Nuxt 中 Font Awesome 图标构建后不显示？解决方法大揭秘

前言

在 Nuxt 的世界里，Font Awesome 图标是提升用户体验的利器。然而，构建后图标失踪的难题可能会让你头疼不已。别担心！本文将携手你，逐层剖析问题根源，并提供切实可行的解决之道。

问题根源：内联 SVG 的消失

构建过程中，Nuxt 通常会将 Font Awesome 图标转换为内联 SVG。但是，有时构建后的 HTML 中会缺失图标路径，导致它们在页面上隐形。

解决步骤

1. 检阅依赖项

确认你已安装以下依赖项：

@nuxtjs/fontawesome
@fortawesome/fontawesome-svg-core
@fortawesome/vue-fontawesome
@fortawesome/fontawesome-common-types
@fortawesome/free-regular-svg-icons
@fortawesome/free-solid-svg-icons

2. 配置 nuxt.config.js

在 nuxt.config.js 中，确保 fontawesome 配置正确：

fontawesome: {
  component: 'Fa',
  suffix: false,
  icons: {
    regular: [
      'faNewspaper',
    ],
    solid: [],
  },
  css: [
    '@fortawesome/fontawesome-svg-core/styles.css',
    '@fortawesome/fontawesome-free/css/all.css'
  ]      
}

3. 导入图标

在 Vue 组件中，导入所需的图标：

import { faNewspaper } from '@fortawesome/free-solid-svg-icons'

4. 使用图标

在模板中，使用 font-awesome-icon 组件显示图标：

<font-awesome-icon :icon="faNewspaper" />

5. 构建并检查

运行 nuxt build 构建应用程序。构建完成后，检查生成的 HTML。图标应具有正确的路径，并在页面上可见。

示例代码

// nuxt.config.js
export default {
  fontawesome: {
    component: 'Fa',
    suffix: false,
    icons: {
      regular: [
        'faNewspaper',
      ],
      solid: [],
    },
    css: [
      '@fortawesome/fontawesome-svg-core/styles.css',
      '@fortawesome/fontawesome-free/css/all.css'
    ]      
  },
}

// 组件模板
<template>
  <div>
    <font-awesome-icon :icon="faNewspaper" />
  </div>
</template>

<script>
import { faNewspaper } from '@fortawesome/free-solid-svg-icons'

export default {
  components: {
    FontAwesomeIcon: require('@fortawesome/vue-fontawesome').FontAwesomeIcon
  },
  data() {
    return {
      faNewspaper
    }
  }
}
</script>