我正在嘗試使用webpack將font-awesome添加到我的Next.js項目中。我已經試著遵循我在網上找到的各種指示(使用文件加載器、url加載器)，但是沒有一個對我有效。我暫時放棄了用webpack加載font-awesome，但我想知道我如何才能做到這一點。目前，我有一個用來加載字體的. scss文件。
其內容:
$fa-font-path: "static/fonts";
@import "~font-awesome/scss/font-awesome.scss";我將字體從node _ modules/font-awesome/fonts手動移動到static/fonts。這很完美，但我想知道在2017年是否有webpack 2的方式來做到這一點。
有三種方法:
1:通過向Head組件添加一個FontAwesome腳本 創建標題組件，添加腳本，并在標題組件或布局文件中呈現該組件，您可以在每個頁面中使用它。
<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;此后，您可以導入& amp將其余的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>更新 要在nextjs13中進行設置，請參考:
如何將字體Awesome添加到Next.js 13項目錯誤模塊未找到
對于任何想看下一個9的真實例子的人，看看https://github.com/UnlyEd/next-right-now吧
有趣的部分是:
https://github . com/UnlyEd/next-right-now/blob/1f 48 e 47 a 92/src/components/page layouts/nav . tsx # L113(用法) https://github . com/UnlyEd/next-right-now/blob/1f 48 e 47 a 92/src/pages/_ app . tsx # L22-L25(配置) 免責聲明:我是該項目的貢獻者
Config: 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
);您可以通過從正確的存儲庫中導入圖標來使用實體/燈光等
用法:components/Nav.tsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
<FontAwesomeIcon icon={['fab', 'github']} />編輯Next.js 10:
雖然上面仍然有效，但我現在對Next.js 10和更高版本的建議是將您的字體相關配置拆分到一個不同的文件中，并將該文件導入到_app.tsx中。這使代碼更易于維護，僅此而已。
類似于:
https://github . com/UnlyEd/next-right-now/blob/e6f 6258207/src/pages/_ app . tsx # L15 https://github . com/UnlyEd/next-right-now/blob/e6f 625820726d 24967 B4 b 14 a5 f 32 c 93266 fac 3c 9/src/utils/icons/font-awesome . ts 這篇文章中沒有一個解決方案是關于如何通過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
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;關于與其他工具和框架集成的官方文檔，請參見此處。
您將能夠執行以下操作:
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} />
)有幾種方法可以做到這一點。第一種方法是通過next/head創建一個head組件，并導入到那里——參見此處:
另一種方法是創建一個HOC來包裝您的頁面，并使用一個簡單的import ' font-awesome/CSS/font-awesome . min . CSS '將其導入
或者，你可以用同樣的導入方式將它導入到你的頁面中。(我相信這會將它的范圍擴大到特定的頁面。請仔細檢查我)
希望這有所幫助。
紗線添加@fortawesome/fontawesome-free
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';我想用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;試試這個
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在具有Turbo功能的Next13中，你可以將字體文件添加到“字體”文件夾中app & quot文件夾-然后使用絕對路徑。
骯臟:)希望這將很快得到解決..