Question

我试图使用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方法可以做到这一点。

Answer 1

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

Answer 2

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

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

导入

或者，您可以使用相同类型的导入将其导入到您的某个页面中。（我相信这会将它扩展到那个特定的页面。请仔细检查我）

希望这有帮助。

Answer 3

对于想在Next 9上看到真实示例的任何人，请查看https://github.com/UnlyEd/next-right-now

有趣的部分是：

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

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

用法：components / Nav.tsx

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

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

Answer 4

添加@ fortawesome / fontawesome-free

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

如何为nextjs项目添加font-awesome

4 个答案: