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

Question

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

<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 中显示的文本是文字字符串  而不是我期望的 Fontawesome 购物车加号图标。我在这里做错了什么。

Answer 1

您必须copy/paste将实际图标放入HTML。看到这个 JSBin for an example. In your source code it will appear as an empty box, but when rendered it will properly display the icon. I copied the icon from the 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 你问的是什么，除了唯一适用于这个问题的部分是 "just put the actual Unicode character you want into your document"。无需担心 meta 标签或编码类型。

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

Text displays as literal text instead of icon

css

svg

font-awesome

snap.svg