React项目中登录切换按钮的CSS箭头图标失效问题求助

你的切换按钮箭头不显示的核心原因是项目中未引入unicons字体库——CSS里指定了font-family: "unicons"并使用了该字体的专属字符\eb4e，但浏览器找不到对应的字体文件，自然无法渲染图标。

具体解决步骤 #

1. 引入Unicons字体库 #

你有两种可靠的引入方式：

• npm安装（推荐）：
  在项目根目录执行命令安装依赖：

  npm install @iconscout/unicons --save
  

  然后在Login组件文件或全局样式文件中导入字体样式：

  import '@iconscout/unicons/css/unicons.css';
  

• CDN引入：
  在项目public/index.html的<head>标签中添加CDN链接：

  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
  

  （可根据需求替换为solid等其他风格的Unicons CSS）

2. 验证字体生效情况 #

如果引入后仍有问题，可以临时修改CSS的content值为系统自带字符测试，比如：

content: "\2192"; /* 向右箭头，系统默认字体可渲染 */

若该箭头正常显示，说明问题确实是Unicons字体未加载导致的。

3. 优化React组件结构（可选） #

你的Login组件包含了<body>标签，这在React项目中不合理——React应用通常挂载到已有<body>下的根节点中，重复的<body>可能引发样式冲突，建议移除：

export function Login() {
  return (
    <div className="section">
      <div className="container">
        <div className="row full-height justify-content-center">
          <div className="col-12 text-center align-self-center py-5">
            <div className="section pb-5 pt-5 pt-sm-2 text-center">
              <h6 className="mb-0 pb-3">
                <span>Log In </span>
                <span>Sign Up</span>
              </h6>
              <input className="checkbox" type="checkbox" id="reg-log" name="reg-log" />
              <label htmlFor="reg-log"></label>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

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