很难显示 Font Awesome Brand 图标

Question

我试图让 Font Awesome Github 图标显示在客户端，但它没有显示。我正在使用 next.js、tailwind 和 React.js 来构建我的第一个作品集。我的 package.json 中有以下依赖项，如下所示

 "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",

font Awesome 图标正在导入到我的 Welcome.jsx 文件中

import React from 'react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {faGithub} from "@fortawesome/free-brands-svg-icons";

我已经上传了我的文件夹结构。

我从其他帖子中看到人们使用 import "@fortawesome/fontawesome-svg-core/styles.css";但我不知道该把它放在哪里？

我仍在掌握 next.js，所以我希望有人可以帮助我并看看我做错了什么......非常感谢你

Answer 1

文件夹结构中有一个

src

文件夹。我假设您的 Welcome.tsx 文件位于该文件夹内？

通常在 Next.js 中，首选使用

pages

文件夹来渲染页面。然后，您可以在

_app.tsx

目录中创建一个

pages

，如下所示，这将导入样式。

_app.tsx

文件夹是您可以向所有组件添加全局样式、添加记录器、分析代码等的地方。此处添加的任何内容都会影响渲染的所有组件。

import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above

import type { AppProps } from 'next/app'
 
export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

如果您决定使用 src 文件夹来放置页面，则应将

app

目录移动到

src/app

，如此处所述。您可能还想更改顺风配置，如此处。我以前没有遵循过这个结构，所以我在文档中查找了这一点。