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

Question

我试图使用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的方式来做。

Answer 1

有几种方法可以做到这一点。第一种方法是通过 nexthead 创建一个头部组件，然后在那里导入--参见 这里。

另一种方法是创建一个HOC来包装你的页面，然后用一个简单的... import 'font-awesome/css/font-awesome.min.css'

或者，你也可以用同样的导入方式把它导入到你的一个页面中。(我相信这样做会把它的范围扩大到那个特定的页面。请再三确认我的说法)

希望对大家有所帮助。

Answer 2

请看这里的官方文件 与其他工具和框架的整合.

你可以进行以下操作。

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

Answer 3

如果有人想看Next 9的真实例子，请看一下 https:/github.comUnlyEdnext-right-now。

有趣的部分是。

• https:/github.comUnlyEdnext-right-nowblobmastersrccomponentsNav.tsx#L234。 (用法)
• https:/github.comUnlyEdnext-right-nowblobmastersrcpages_app.tsx#L39-L42。 (配置)

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

---

配置：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
);

你可以通过从正确的资源库导入图标来使用solidlightetc。

使用方法： componentsNav.tsx

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

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