点击图片切换时Font Awesome图标不显示仅出现空白圆圈，如何解决？

可能的原因及对应修复步骤 #

1. Font Awesome 未正确加载 #

空白圆圈通常是图标字体未加载导致的，页面找不到对应图标字符就会显示占位圆圈。

• 确认项目中已安装Font Awesome依赖：

  npm install @fortawesome/fontawesome-free
  

• 在项目入口文件（如index.js或App.js）中引入样式：

  import '@fortawesome/fontawesome-free/css/all.min.css';
  

• 避免用字符串拼接HTML的方式引入图标，改用React组件写法更可靠：

  // 替换原来的iZero定义
  const IZero = () => (
    <li style={{ '--i': 0 }}>
      <i style={{ color: '#333' }} className="fa fa-github-square" aria-hidden="true"></i>
    </li>
  );
  

  然后在JSX中直接使用组件：

  <div className="div">
    <IZero />
  </div>
  

2. 状态切换逻辑的潜在问题 #

当前直接用classList判断状态，可能因闭包获取到旧状态值，建议改用函数式更新：

const circularButton = () => {
  setClassList(prevClass => 
    prevClass === "menu" ? "menu active" : "menu"
  );
};

这样能确保每次取到最新状态值，避免切换逻辑失效。

3. CSS 样式缺失或错误 #

检查.menu.active对应的图标显示样式：

• 确保图标元素在active状态下可见（无display: none或opacity: 0）
• 验证--i变量的动画、定位逻辑是否正确应用

完整修复后的代码示例 #

import React, { useState, useEffect } from 'react';
import '@fortawesome/fontawesome-free/css/all.min.css';
import Picture from './path-to-your-image'; // 替换为实际图片路径

const MenuComponent = () => {
  const [classList, setClassList] = useState("menu-hidden");

  useEffect(() => {
    const timer = setTimeout(() => {
      setClassList("menu");
    }, 2000);
    return () => clearTimeout(timer); // 清理定时器避免内存泄漏
  }, []);

  const circularButton = () => {
    setClassList(prevClass => 
      prevClass === "menu" ? "menu active" : "menu"
    );
  };

  const IZero = () => (
    <li style={{ '--i': 0 }}>
      <i style={{ color: '#333' }} className="fa fa-github-square" aria-hidden="true"></i>
    </li>
  );

  return (
    <div className={classList}>
      <div className="toggle" onClick={circularButton}>
        <img src={Picture} alt="Toggle button" />
      </div>
      <div className="div">
        <IZero />
      </div>
    </div>
  );
};

export default MenuComponent;

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