文本显示为文字文本而不是图标答案

【问题标题】：Text displays as literal text instead of icon文本显示为文字文本而不是图标
【发布时间】：2016-09-04 05:04:18
【问题描述】：

我正在编写一些代码，以便在动态生成 SVG 图像的 Chrome（Windows 和 Android）中查看。我的代码是这样的

<head>
<style>
@font-face
{
 font-family:"toolbar";
 src:url('https://cdn.jsdelivr.net/fontawesome/4.6.2/fonts/fontawesome-
 webfont.ttf') format('truetype');
}
</style>
//font to be packaged as a resource in the APK in due course. My current
//tests are on Chrome in Windows

<script>
$(document).ready(function()
{
 var s = Snap('#world');
 s.text(821,1385,'&#xf217;').attr({fill:'#FAD411',
 "font-size":"10vw","font-family":"toolbar"});
}
</head>
<body>
<div id='svgbox'>
<svg id='world' height="100%" width="100%" viewBox="0 0 2000 2547" 
preserveAspectRatio="xMidYMid meet">
//the SVG is created in here dynamically from code 
</svg>
</div>
</body>
</html>

虽然其他一切正常 - 并且测试 toolbar 字体系列实际上在 normal html 标记中可用 - 在 SVG 中显示的文本是文字字符串 &#xf217; 而不是 Fontawesome我期望的购物车加号图标。我在这里做错了什么。

【问题讨论】：

嗯，我看不到如何在 SnapSVG 中使用字形标记，否则 fontawesome 和引导符号被定义为字形：stackoverflow.com/questions/18113478/…

标签： css svg font-awesome snap.svg

【解决方案1】：

您必须将实际图标复制/粘贴到 HTML 中。有关示例，请参阅此 JSBin。在您的源代码中，它将显示为一个空框，但在呈现时它将正确显示图标。我从Font Awesome cheatsheet 复制了图标。

var s = Snap('#world');
var text = s.text(821, 1385, '');
text.attr({
    fill: '#FAD411',
    fontSize: "15vw",
    fontFamily: "toolbar"
});

This answer is similar 符合您的要求，除了适用于该问题的唯一部分是“只需将您想要的实际 Unicode 字符放入文档中”。无需担心meta 标签或编码类型。

【讨论】：