React Semantic UI列表项目符号部署后显示乱码求助

AI 小北

2026-7-12

React Semantic UI列表项目符号乱码问题解决办法

问题描述

使用React Semantic UI的列表组件时，部署完成后列表项目符号显示为乱码字符，当前index.html头部代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />

列表项目符号乱码效果如图：

原因分析

乱码本质是Semantic UI用于渲染项目符号的图标字体文件未正确加载，可能是字体文件未被打包部署、CSS中字体引用路径错误，或者部署环境的基础URL配置问题导致资源请求失败。

解决步骤

检查字体文件部署情况：确认semantic-ui-css包中的字体文件（如icons.eot、icons.woff2、icons.woff等）存在于部署后的静态资源目录中，路径需与CSS文件内的引用一致。
规范CSS引入方式：若使用Create React App，推荐在index.js中直接导入Semantic UI的CSS：
```
import 'semantic-ui-css/semantic.min.css';
```
避免手动在index.html中通过<link>标签引入，减少路径错误概率。
配置部署基础URL：若项目部署在域名子目录下，需在package.json中添加homepage字段，确保资源引用路径正确：
```
"homepage": "/你的子目录路径/"
```
临时替代方案：若字体加载问题暂时无法修复，可通过自定义CSS覆盖默认样式，用普通圆点替代图标字体：
```
.ui.list .list>.item:before, .ui.list>.item:before {
  content: "•";
  font-family: inherit;
  margin-right: 0.5em;
}
```