为什么我的fontawesome偶像在我的下一个项目中呈现？

Question

我有一个下一个项目。

但是，图标并未显示在网页上。我什至在“检查元素”和“父级”中检查了，图标元素不存在。

以下是我的_app.js文件：

import '../styles/globals.css'

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

下面是我的index.js文件，在页面目录中：

import React, { Fragment } from "react"
import Head from 'next/head'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import '../node_modules/@fortawesome/fontawesome-svg-core/styles.css'

export default function Home() {
  return (
    <Fragment>
      <FontAwesomeIcon icon="fa-brands fa-facebook-f" />
    </Fragment>
  )
}

为什么我的图标渲染不进行以及如何修复？ 提前致谢。

Answer 1

您仍然需要将图标导入您的项目。这就是为什么什么都没有显示。这是您的index.js如果使用免费品牌SVG图标：

import React, { Fragment } from 'react'
import Head from 'next/head'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebookF } from '@fortawesome/free-brands-svg-icons'

export default function Home() {
  return (
    <Fragment>
      <FontAwesomeIcon icon={faFacebookF} />
    </Fragment>
  )
}