在svg中显示fontawesome图标

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-调整图标，可以发现here。另外，如何从图标名称中获取unicode？

Answer 1

样式表应申报FONT-FAMILY

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

的Html

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

Answer 2

您的代码应该工作，假设你正确包括您的文档中的fontawesome CSS。我从字面上将代码粘贴到小提琴中，并通过CDN包含了最新版本的fontawesome，它的工作原理如下：http://jsfiddle.net/mayacoda/o59uak50/

对于第二部分，我假设您希望只需键入图标名称即可，而无需查看每个unicode。考虑到我不知道这个上下文，我也会假设你正在使用javascript，并且这个功能的可用表单将是一个带有键值对的对象（名称：“unicode”）。

可以运行的cheatsheet页面上这个脚本，它会扫描通过页面上的元素，并返回键 - 值对的对象，像这样：

{ 
"fa-adjust": "" 
... 
} 

运行控制台脚本。

(function() { 
    var unicode = {}; 

    $('.fa').each(function() { 
     var code = $(this).siblings().text().match(/\[(.*)\]/); 
     code = code ? code[1] : ''; 

     var name = $(this).parent()[0].innerText.match(/\b(.*)\[/); 
     if (!name || !name[1]) { 
      return; 
     } 

     name = name[1].trim(); 
     unicode[name] = code; 
    }); 

    return unicode; 
})();