react-checkbox-tree 图标未正确显示

Question

我正在尝试实现对地图上显示的项目的过滤。项目有一个字段，我们称之为

itemType

。

itemType

可以具有多个值之一。每个值都属于几个类别之一。为了允许通过检查特定类别来选择/取消选择单个类别中的所有项目类型，我决定使用

react-checkbox-tree

。

Category1
    ItemType1
    ItemType2
    ...
Category2
    ItemType3
    ItemType4
    ...
...

我找到了简单的示例演示

react-checkbox-tree

这里。
示例可以无缝运行。

但是当我在应用程序中尝试代码时，项目的图标未正确显示。
它看起来如下图所示：

我传递给

onCheck

钩子的回调在选中/取消选中项目时被调用，我可以看到选中的项目被添加到选中的项目数组中。我什至看到当选中/取消选中项目时，奇怪的图标发生了变化（在

F096

和

F046

之间）。

有谁知道如何使图标显示为stackblitz上的示例？

值得注意的是，我是C++开发人员，这是我第一次编写reactjs应用程序，所以我希望答案尽可能简单。

Answer 1

示例中的图标依赖于 Font

Font Awesome 5 Free

中的特殊 unicode 字符（回退到

FontAwesome

） 当字体不包含指定的 unicode 字符时，您案例中的图标是浏览器的后备。

要么您错过了字体系列定义（如下所示），要么您不提供字体服务。

font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;

https://fontawesome.com/docs/web/ 显示了将字体包含到网页中的不同方法。