svg圈中的React-FontAwesome unicode值答案

【问题标题】：React-FontAwesome unicode values in svg circlesvg圈中的React-FontAwesome unicode值
【发布时间】：2019-11-29 10:16:33
【问题描述】：

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

出于某种我不明白的原因，当我使用这个 unicode 值（&#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; 
}

这是什么原因造成的？

【问题讨论】：

我很抱歉有一个愚蠢的评论，但可能是您使用带有旧字体库的 cdn，或者没有它的字体。尝试使用 unicode 编码的代码保存文档。
我所做的只是下载 react-fontawesome npm 包。如何使用较新的 fa cdn？
我是 React 新手。而不是 NPM 包（可能它没有新图标）尝试直接从 fontawesome 的 CDN 导入文件或下载它并从 fontawesome.io 手动导入（它是一个包含 css 和字体的存档，所以只需将它们导入你的项目并使用，可能会有所帮助）
我认为您还没有将font-awesome.css 或font-awesome.scss 导入到您的项目中。
@TienDuong 我什至无法访问它，它不附带 npm 包。如何手动导入？

标签： reactjs svg unicode font-awesome react-font-awesome

【解决方案1】：

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

【讨论】：