如何将Font Awesome添加到Next.js项目

hsgswve4 于 2023-01-05 发布在其他

关注(0)|答案(8)|浏览(165)

我试着用webpack把font-awesome添加到我的Next.js项目中。我试着按照我在网上找到的各种指令（使用file-loader，url-loader），但是没有一个对我起作用。我暂时放弃了用webpack加载font-awesome，但是我想知道我如何才能完成这个任务。目前，我有一个.scss文件用来加载font-awesome。
它的内容：

$fa-font-path: "static/fonts";
@import "~font-awesome/scss/font-awesome.scss";

我正在手动将字体从node_modules/font-awesome/fonts移动到static/fonts。这非常好用，但我想知道2017年是否有webpack 2的方法可以做到这一点。

next.js

来源：https://stackoverflow.com/questions/44752189/how-to-add-font-awesome-to-next-js-project

8条答案

按热度按时间

c90pui9n1#

如果您想看一个关于Next 9的真实示例，请查看https://github.com/UnlyEd/next-right-now
有趣的部分是：

https://github.com/UnlyEd/next-right-now/blob/1f48e47a92/src/components/pageLayouts/Nav.tsx#L113 (usage)
https://github.com/UnlyEd/next-right-now/blob/1f48e47a92/src/pages/_app.tsx#L22-L25 (config)
免责声明：我是该项目的贡献者 *

配置：页面/_ app. tsx

import { config, library } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { faAngleDown } from '@fortawesome/pro-solid-svg-icons';

// See https://github.com/FortAwesome/react-fontawesome#integrating-with-other-tools-and-frameworks
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
library.add(
  faGithub, faAngleDown
);

您可以通过从正确的存储库导入图标来使用solid/light/etc
用途：组件/导航tsx

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

<FontAwesomeIcon icon={['fab', 'github']} />

- 编辑下一个. js 10**：

虽然上述方法仍然有效，但我现在建议Next.js 10及更高版本将Font-Awesome相关配置拆分到一个不同的文件中，并将该文件导入到_app.tsx中，这使代码更易于维护，仅此而已。
例如：

https://github.com/UnlyEd/next-right-now/blob/e6f6258207/src/pages/_app.tsx#L15
https://github.com/UnlyEd/next-right-now/blob/e6f625820726d24967b4b14a5f32c93266fac3c9/src/utils/icons/font-awesome.ts

赞(0）回复(0）举报 2023-01-05

tjjdgumg2#

这篇文章中没有一个解决方案是关于如何通过cdn使用font-awesome的，所以，我打算这样做。
有多种方法可以实现这一点，但我通常使用_app.js或_document.js来完成这类任务。
下面是它是如何通过_document. js实现的

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    <link
                        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
                        rel="stylesheet"
                        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
                        crossOrigin="anonymous"
                    />
                    <script src="https://kit.fontawesome.com/e20sdfsd9.js" crossOrigin="anonymous"></script>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;

这里我只是在下一个应用程序的DOM中添加了一个指向fontawesome的css cdn的链接，该链接将添加到浏览器中呈现的页面中。
要了解更多关于_document.js的信息，请参阅here
一个类似的方法可以通过_app.js，我现在不使用，但如果有人需要它，自由下降的评论，我会为你做。
下面是对custom app or _app.js的简要介绍

赞(0）回复(0）举报 2023-01-05

omjgkv6w3#

有3种方式：

1：通过将FontAwesome脚本添加到`Head`组件

创建Head组件，添加脚本，并在Header组件或Layout文件中呈现此组件，您将在每个页面中使用此组件。

<Head>
  <script
    // you might need to get a newer version
    src="https://kit.fontawesome.com/fbadad80a0.js"
    crossOrigin="anonymous"
  ></script>
</Head>

2：在`_document.js`中添加到CDN的链接。

可以在pages文件夹下创建一个_document.js来覆盖Next.js中的根html文件，也可以添加一些其他CDN，但是，最简单的方法是：

<Html>
  <Head>
    <link
      rel="stylesheet"
      type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </Head>
  <body>
    <Main />
    <NextScript />
  </body>
</Html>

3：为FontAwesome安装所有必需的`npm`软件包

npm install --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

然后在_app.js文件的顶部添加以下行：

// import Font Awesome CSS
import "@fortawesome/fontawesome-svg-core/styles.css";
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false;

此后，您可以导入并使用其余的FontAwesome图标作为React组件，如下所示：

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck, faTrash } from "@fortawesome/free-solid-svg-icons";

<FontAwesomeIcon icon={faCheck} className="fas fa-check" style={{ color: "red" }}
></FontAwesomeIcon>

赞(0）回复(0）举报 2023-01-05

ccrfmcuu4#

有关与其他工具和框架集成的正式文档，请参见此处。
您将能够执行以下操作：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { config, library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

config.autoAddCss = false;
library.add(fas, fab);

return ( 
  <FontAwesomeIcon icon={['fas', 'hat-wizard']} />
  <FontAwesomeIcon icon={['fab', 'github']} />
)

或

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

return ( 
   <FontAwesomeIcon icon={faAdobe} />
)

赞(0）回复(0）举报 2023-01-05

omtl5h9j5#

有几种方法可以做到这一点。第一种是通过next/head创建一个head组件并导入到那里a-请看这里：
另一种方法是创建一个HOC来 Package 您的页面，并使用简单的import 'font-awesome/css/font-awesome.min.css'导入到其中
或者，你可以用同样的方式把它导入到你的页面中。（我相信这会把它的范围限制在那个特定的页面上。请仔细检查我）
希望这个有用。

赞(0）回复(0）举报 2023-01-05

9njqaruj6#

1.Yarn添加@fortawesome/不含fortawesome
1.在_应用程序. js中

import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
import '@fortawesome/fontawesome-free/js/brands';

赞(0）回复(0）举报 2023-01-05

aelbi1ox7#

"试试这个"

const Hello = () => {

    return (
        <div>
            <Head>
                <title>New Title</title>
                <meta name="description" content="some description here" />
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
            </Head>

            <h1>Hello World <i class="far fa-laugh-beam"></i></h1>
        </div>
    )
}

export default Hello

- 在继续之前安装以下软件包**

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

赞(0）回复(0）举报 2023-01-05

e7arh2l68#

我想使用React 18 Next.js 13和bootstrap 5以及fontAwesome发布一个答案。
有一个错误弹出给我

Error: Hydration failed because the initial UI does not match what was rendered on the server.

在控制台中，我收到类似以下内容的错误

Expected server HTML to contain a matching <li> in <div>

我修复了这个问题，方法是使用每个人都使用Next.js的useEffect技巧，使fontAwesomeIcon仅在挂载时呈现
下面是一个示例组件

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Row, Col } from 'reactstrap';

const AboutUsProcess = ({ icon, iconText, color, title, description, image, lottie, inverse, children }) => {

  const [mounted, setMounted] = useState(false);
  useEffect(() => {
      setMounted(true) // must be true to render FontAwesomeIcon
  }, [])
  
  
  return  (
    <Row className="flex-center">
      <Col md lg={5} xl={4} className={classNames('pl-lg-6', { 'order-md-2': inverse })}>
      </Col>
      <Col md lg={5} xl={4} className="mt-4 mt-md-0">
        <h5 className={`text-${color}`}>
          { mounted && (
            <FontAwesomeIcon icon={icon} className="mr-2" />
            )}
            {iconText}
        </h5>
        <h3>{title}</h3>
        <p>{description}</p>
        {children}
      </Col>
    </Row>
  );
};

export default AboutUsProcess;

赞(0）回复(0）举报 2023-01-05

我来回答

如何将Font Awesome添加到Next.js项目

8条答案

1：通过将FontAwesome脚本添加到`Head`组件

2：在`_document.js`中添加到CDN的链接。

3：为FontAwesome安装所有必需的`npm`软件包

相关问题

热门标签

最新问答

如何将Font Awesome添加到Next.js项目

8条答案

1：通过将FontAwesome脚本添加到Head组件

2：在_document.js中添加到CDN的链接。

3：为FontAwesome安装所有必需的npm软件包

相关问题

热门标签

最新问答

1：通过将FontAwesome脚本添加到`Head`组件

2：在`_document.js`中添加到CDN的链接。

3：为FontAwesome安装所有必需的`npm`软件包