时间戳

首页 > 解决方案 > Next.js 字体真棒

css - Next.js 字体真棒

问题描述

目前，我正在使用 Next.js 和 React.js 并想使用 Font Awesome 5 Free。

所以我安装了这几个包

"@fortawesome/fontawesome-free": "^5.13.0",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-brands-svg-icons": "^5.13.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.10",

用于 JSX 文件

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';

<FontAwesomeIcon icon={faChevronDown} />

但用于 CSS 文件

.dummy::before {
  content: '\xxx';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

图标似乎无法加载，有什么正确的方法可以导入字体吗？我尝试从中导入 Font Awesome CSS 文件node_modules，但没有任何效果。

标签： cssreactjssassfont-awesomenext.js

解决方案

推荐阅读