Webpack 如何将字体添加到Next.js项目

我正在尝试使用webpack将font awesome添加到我的下一个.js项目中。我尝试过按照我在网上找到的各种说明（使用文件加载器、url加载器），但都不管用。我暂时放弃了用webpack加载FontAwest，但我想知道如何才能做到这一点。目前，我有一个

.scss

文件，用于加载字体

内容包括:

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

---

我正在手动将字体从

node\u模块/font-awesome/font

移动到

static/font

。这非常有效，但我想知道2017年是否有Webpack2方法可以做到这一点

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

另一种方法是创建一个HOC来包装您的页面，并使用一个简单的

import'font awesome/css/font awesome.min.css'

或者，你可以用同样的导入方式将它导入到你的一个页面中。（不过，我相信这会将其范围扩大到该特定页面。请仔细检查我的情况）

---

希望这对您有所帮助。

如果您想了解下一个9的真实示例，请查看

有趣的部分是：

• （用法）
• （配置）

免责声明：我是该项目的参与者

---

配置：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']} />

从'@fortawesome/react-fontawesome'导入{FontAwesomeIcon}；

---

编辑Next.js 10：

虽然上述方法仍然有效，但我现在建议Next.js 10及更高版本将与字体相关的配置拆分为不同的文件，并在

\u app.tsx

中导入该文件。这使得代码更易于维护，仅此而已

比如：

---

有关的官方文档，请参见此处
您将能够执行以下操作：

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']} />
)

从'@fortawesome/react-fontawesome'导入{FontAwesomeIcon}；
从“@fortawesome/fontawesome svg核心”导入{config，library}；
从“@fortawesome/free solid svg icons”导入{fas}；
从“@fortwome/free brands svg icons”导入{fab}；
config.autoAddCss=false；
库。添加（fas、fab）；
报税表（
)

或

从'@fortawesome/react-fontawesome'导入{FontAwesomeIcon}；
从“@fortawesome/free brands svg icons/faAdobe”导入{faAdobe}”；
报税表（
)

• 纱线添加@fortawesome/fontawesome免费

• in_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';
  

---

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

从“next/Document”导入文档，{Html，Head，Main，NextScript}；
类MyDocument扩展了文档{
render（）{
返回(
);
}
}
导出默认MyDocument

此解决方案就是您正在寻找的解决方案请注意，当前的答案仍然与Next.js 10兼容，但我发现了一种更易于维护的方法，它只与Next.js 10+兼容，基本上就是将所有与字体相关的内容移到另一个文件中，然后在

\u app.tsx

中导入该文件。就像在那里做的一样：谢谢。这真的很有帮助。然而，Fontawesome的src链接似乎再也找不到了。在我将链接更改为上显示的链接后，它运行良好（*不要将此链接用作src。跳转到网站，然后在那里获得链接）

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