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

Posted 2023-02-22

技术标签:

【中文标题】如何将 Font Awesome 添加到 Next.js 项目【英文标题】：How to add Font Awesome to Next.js project 【发布时间】：2017-11-28 20:22:52 【问题描述】：

我正在尝试使用 webpack 将 font-awesome 添加到我的 Next.js 项目中。我已经尝试按照我在网上找到的各种说明（使用文件加载器、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 的方式来做到这一点。

【问题讨论】：

【参考方案1】：

如果您想查看 Next 9 的真实示例，请查看 https://github.com/UnlyEd/next-right-now

有趣的部分是：

https://github.com/UnlyEd/next-right-now/blob/1f48e47a92/src/components/pageLayouts/Nav.tsx#L113（用法） https://github.com/UnlyEd/next-right-now/blob/1f48e47a92/src/pages/_app.tsx#L22-L25（配置）

免责声明：我是该项目的贡献者

配置：pages/_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

用法：组件/Nav.tsx

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

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

编辑 Next.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

【讨论】：

这个解决方案就是你要找的解决方案注意，目前的答案还是兼容Next.js 10，但是我找到了一种更易维护的方式，只兼容Next.js 10+，基本上就是把所有font-awesome相关的都搬过去了东西到另一个文件，然后将该文件导入_app.tsx。就像在那里完成的那样：github.com/UnlyEd/next-right-now/blob/e6f6258207/src/pages/… 和 github.com/UnlyEd/next-right-now/blob/…【参考方案2】：

有几种方法可以做到这一点。第一个是通过 next/head 创建一个 head 组件并在那里导入 - 参见here:

另一种方法是创建一个 HOC 来包装您的页面并使用简单的 import 'font-awesome/css/font-awesome.min.css' 导入那里

或者，您可以使用相同类型的导入将其导入您的页面之一。（不过，我相信这会将其范围限定为该特定页面。请仔细检查我）

希望这会有所帮助。

【讨论】：

【参考方案3】：

Integrating with other tools and frameworks的官方文档请看这里。

您将能够执行以下操作：

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 />
)

【讨论】：

【参考方案4】：

纱线添加@fortawesome/fontawesome-free

在 _app.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';

【讨论】：

【参考方案5】：

这篇文章中没有一个解决方案是关于如何通过 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的简要介绍

【讨论】：

谢谢。这真的很有帮助。但是，Fontawesome 的这个 src 链接似乎不再可用了。我把链接改成cdnjs.com/libraries/font-awesome上显示的链接后效果很好（*不要将此链接用作src。跳转到网站然后在那里获取链接）【参考方案6】：

试试这个

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

【讨论】：

以上是关于如何将 Font Awesome 添加到 Next.js 项目的主要内容，如果未能解决你的问题，请参考以下文章

尝试将 Font-Awesome 图标添加到我的导航栏中的选项卡

如何在 SwiftUI 中使用 Font Awesome 作为自定义字体？

将 Solid and Light Font Awesome Pro 添加到 React 站点

可以将自定义图标添加到 font-awesome-react

为网站文字前面添加图标在线调用 Font Awesome 字体图标美化网站

将 Font Awesome 集成到 Kendo UI CSS 中