react-checkbox-tree图标显示异常，求React新手友好的修复方案

你的问题是组件图标显示成F096、F046这类字符，本质是没有加载组件依赖的Font Awesome字体文件——这些字符就是Font Awesome图标的Unicode编码，浏览器找不到对应的字体时就会直接显示编码本身。

给你几个简单直接的修复步骤：

• 第一步：安装Font Awesome依赖
  在项目根目录的终端里执行命令：

  npm install @fortawesome/fontawesome-free
  

  如果用yarn的话就执行：

  yarn add @fortawesome/fontawesome-free
  

• 第二步：在项目入口文件引入字体样式
  找到项目的入口文件（一般是src/index.js或者src/App.js），在文件顶部添加一行代码：

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

• 第三步：确认组件没有错误自定义图标
  如果你之前给react-checkbox-tree手动设置过icons属性，确保用的是符合Font Awesome规范的图标配置；如果没自定义过，前面两步就足够解决问题了。

做完这些刷新页面，图标就能正常显示了——组件的勾选逻辑本来就没问题，只是缺了图标字体的支持。

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