reactjs - svg 圆圈中的 React-FontAwesome unicode 值

Question

我正在尝试通过字体真棒网站内部的 unicode 值在 svg 圆圈内嵌入一个字体真棒图标<text>，但它们未能出现：

出于某种我不明白的原因，当我使用这个 unicode value( &#x2713) 时，它确实出现了（但它不是我需要的图标）：

一些代码：

从反应组件：

       <g>
            <circle className="circle test-circle"
                key={index}
                cx={xScale(node.x)}
                cy={yScale(node.y)}
                r={node.r}
                fill={node.done === true ? colour : "grey"}
            />
            {node.done === true ? 
                <text id="chk" style={{fontFamily:'Font Awesome'}} x={xScale(node.x)-10} y={yScale(node.y)+10}>&#xf00c;</text>
                :
                <text id="chk" style={{fontFamily:'Font Awesome'}} x={xScale(node.x)-10} y={yScale(node.y)+10}>&#xf00c;</text>
            }

        </g>         

来自scss：

text#chk {
    font-family: 'Font Awesome';
    content: "\f00c";
    font-size: 30px; 
}

什么会导致这种情况？

Answer 1

我发现了问题，字体系列是font-family='fontawesome'而不是'Font Awesome'