在 svg 中显示超赞的图标

Question

我如何在 svg snipet 中显示一个 fontawesome 图标？我尝试了以下操作，但不起作用：

<svg xmlns="http://www.w3.org/2000/svg">
<g>
  <rect x="0" y="0" width="100" height="100" fill="red" ></rect>
  <text x="30" y="30" font-family="FontAwesome" font-size="20" fill="blue" >&#xf042;</text>
</g>
</svg>

unicode对应于 fa-adjust 图标，可在此处找到。另外，我如何从图标的名称中获取 unicode？

Answer 1

你的样式表应该声明 font-family

svg text {
   font-family: FontAwesome;
   font-size:20px;
   background-color:blue;
}

html

<text x="30" y="30">&#xf042;</text>