Text displays as literal text instead of icon

Question

I am in the process of writing some code to be viewed exclusively in Chrome (Windows and Android) which dynamically generates SVG images. My code goes something like this

<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>

While everything else works - and testing that the toolbar font family is actually available in normal html markup succeeds - in the SVG the text displayed is the literal string  instead of the Fontawesome cart-plus icon as I expect. What am I doing wrong here.

Hm, I can't see how to use glyph tag in SnapSVG, otherwise fontawesome and bootstrap symbols are defined as glyphs: http://stackoverflow.com/questions/18113478/extracting-svg-from-font-awesome — Boris Burkov, May 09 '16 at 14:17

score 1 · Accepted Answer · edited May 23 '17 at 12:23

You have to copy/paste the actual icon into the HTML. See this 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 to what you were asking, except the only part that applies to this question is "just put the actual Unicode character you want into your document". No need to worry about the meta tags or encoding types.

Text displays as literal text instead of icon

1 Answers1