React项目中FontAwesomeIcon不显示问题求助

数据老陈

2026-6-26

React中FontAwesome图标无法显示的解决方法

你的按钮功能正常但图标不显示，核心问题是图标引用方式不符合React FontAwesome的版本要求，以下是具体修复步骤：

1. 按需导入图标常量

在组件文件顶部，从Solid图标包中导入faPlus和faMinus：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';
import { useState } from 'react';

2. 修改组件内的图标使用代码

把原来的字符串形式图标名，替换成导入的图标常量：

const [isOpen, setIsOpen] = useState(false);

const handleOpening = () => {
    setIsOpen((prev) => !prev);
};

<button onClick={handleOpening} className='expandButton'>
    {!isOpen ? (
        <FontAwesomeIcon icon={faPlus} />
    ) : (
        <FontAwesomeIcon icon={faMinus} />
    )}
</button>

补充：全局注册图标（可选）

如果项目中多处用到这些图标，可在入口文件（如index.js）中将图标注册到FontAwesome全局库，之后组件内无需重复导入：

import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';

// 将图标添加到全局库
library.add(faPlus, faMinus);

此时组件内可简化写法：

<button onClick={handleOpening} className='expandButton'>
    {!isOpen ? (
        <FontAwesomeIcon icon="plus" />
    ) : (
        <FontAwesomeIcon icon="minus" />
    )}
</button>