在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; 
})();