SVG圈子中的React-FontAwesome Unicode值

Question

I am trying to embed a font awesome icon inside svg circles via unicode values from the font awesome website inside <text> , but they fail to appear:

for some reason which I don't understand, when I am using this unicode value( &#x2713 ) it does appear(but it's not the icon I need):

Some code:

from the react component:

       <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>         

from the scss:

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

What can cause this?

Answer 1

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