React中使用FontAwesome：library.add()添加位置及图标找不到问题

安全阿岳

2026-7-16

FontAwesome图标渲染错误的修复方案

核心问题分析

你遇到的"could not find icon"错误，主要是因为<FontAwesomeIcon>组件的icon属性写法不符合规范，和library.add()的位置无关——你当前把它放在组件外部的写法是正确的，能正常完成图标库的注册。

具体修正步骤

错误写法：<FontAwesomeIcon icon="faCoffee" />
正确写法二选一：
1. 直接使用导入的图标变量：
```
<FontAwesomeIcon icon={faCoffee} />
```
2. 使用「样式前缀+图标名」的数组格式（faCoffee属于solid样式，前缀为fas）：
```
<FontAwesomeIcon icon={['fas', 'coffee']} />
```

修正后的完整代码

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import './header.css'

library.add(fab, faCheckSquare, faCoffee)

export default function Header(){
  return (
    <>
      <div className="header">
          <h3 className="heading">heading.</h3>
          <li className="header-nav">
            {/* 修正了icon属性，同时把无效的href="true"改成占位用的href="#" */}
            <a href="#" id="contact">contacts<FontAwesomeIcon icon={faCoffee} /></a>
          </li> 
      </div>
    </>
  )
}