如何在React项目中添加Font Awesome SVG图标？CSS Modules是否有影响？

CSS Modules 确实会影响 Font Awesome 图标的引用方式——因为 CSS Modules 会给所有类名自动添加哈希后缀，而 Font Awesome 的图标类（如 fa-solid、fa-house）是固定的，不能被哈希处理，这就是你按官方文档操作失败的核心原因。下面是针对性的解决步骤：

1. 全局引入 Font Awesome 样式 #

不要把 Font Awesome 的 CSS 放在 CSS Modules 文件中，而是作为全局样式在项目入口（比如 index.js）直接引入：

// 免费版
import '@fortawesome/fontawesome-free/css/all.css';
// Pro 版本请替换为对应路径

这样 Font Awesome 的类名会保持原始状态，不会被 CSS Modules 修改。

2. 组件中直接使用原始类名 #

在 nav.js 的 JSX 里直接写 Font Awesome 的原始类名，不要通过 CSS Modules 的类名映射（styles.xxx）引用：

// 正确写法
<i className="fa-solid fa-house"></i>

// 错误写法（禁止这样做）
<i className={`${styles['fa-solid']} ${styles['fa-house']}`}></i>

后者会让类名变成带哈希的格式，Font Awesome 无法识别对应的图标。

3. 用 React 组件库彻底规避冲突 #

如果你用的是 React 项目，更推荐使用 Font Awesome 的 React 组件库，完全不受 CSS Modules 影响：

安装依赖 #

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

在组件中使用 #

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

function Nav() {
  return (
    <nav>
      <FontAwesomeIcon icon={faHouse} />
      {/* 可以直接添加自定义样式，比如用 CSS Modules */}
      <FontAwesomeIcon icon={faHouse} className={styles.navIcon} />
    </nav>
  );
}

这种 SVG 组件方式不仅避免了类名冲突，还支持更灵活的样式定制。

4. 检查依赖与配置 #

打开你的 package.json，确认已安装正确的 Font Awesome 包：

"dependencies": {
  "@fortawesome/fontawesome-free": "^6.4.0",
  // 或者 React 组件库的相关包
  // "@fortawesome/fontawesome-svg-core": "^6.4.0",
  // "@fortawesome/free-solid-svg-icons": "^6.4.0",
  // "@fortawesome/react-fontawesome": "^0.2.0",
  // 其他依赖...
}

如果依赖版本过低，也可能导致兼容性问题，建议升级到最新稳定版。

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