如何在React应用中正确使用Font Awesome图标？

• 第一步：补充安装依赖包
  你目前只引入了@fortawesome/react-fontawesome核心组件，还需要安装对应的图标资源包，免费常用的包安装命令如下：

# npm 安装
npm install @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core
# yarn 安装
yarn add @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core

• 第二步：导入需要使用的图标
  在你要使用图标的组件文件顶部，补充导入需要的图标，比如你需要的首页图标、登出图标导入方式如下：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHouse, faRightFromBracket } from '@fortawesome/free-solid-svg-icons'
// faHouse对应首页图标，faRightFromBracket对应登出图标

• 第三步：替换现有代码中的i标签写法
  你之前的传统类名写法不适用于React版的Font Awesome组件，需要换成组件调用的方式，你给出的表格代码修改后如下：

<td width="150px">
  <p align="center"/>
  <button className="btn">
    <FontAwesomeIcon icon={faHouse} />
  </button>
</td>
<td width="135">
  <p align="center"/>
  <button className="btnSignout">
    <FontAwesomeIcon icon={faRightFromBracket} />
  </button>
</td>

• 补充使用技巧
  如果需要自定义图标大小、颜色，可以直接给组件加属性或者类名控制，示例如下：

// 调整大小为2倍
<FontAwesomeIcon icon={faHouse} size="2x" />
// 自定义颜色
<FontAwesomeIcon icon={faRightFromBracket} style={{color: "#ff0000"}} />

• 可选：全局注册图标（适合多组件复用图标场景）
  在项目入口文件（如index.js）中完成全局注册后，所有组件无需重复导入图标即可直接使用：

// 入口文件配置
import { library } from '@fortawesome/fontawesome-svg-core'
import { faHouse, faRightFromBracket } from '@fortawesome/free-solid-svg-icons'

library.add(faHouse, faRightFromBracket)

注册后组件内调用写法：

<FontAwesomeIcon icon="house" />
<FontAwesomeIcon icon="right-from-bracket" />

内容的提问来源于stack exchange，提问作者Blaq