Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <title>Text displays as literal text instead of icon</title>
  <meta name="description" content="created for answer on Stack Overflow">
  <!-- Question/answer located here: http://stackoverflow.com/questions/37117853/text-displays-as-literal-text-instead-of-icon/37123490#37123490 -->
  
    <style>
    @font-face {
        font-family: "toolbar";
        src: url('https://cdn.jsdelivr.net/fontawesome/4.6.2/fonts/fontawesome-webfont.ttf') format('truetype');
    }
    
    body,
    html {
        font-family: toolbar;
        font-size: 16px;
    }
    </style>
</head>
<body>
    Example: <br/>
    <span>&#xf217;</span>
    <div id='svgbox'>
        <svg id='world' height="100%" width="100%" viewBox="0 0 2000 2547" preserveAspectRatio="xMidYMid meet">
        </svg>
    </div>
  
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
    <script>
    $(document).ready(function() {
        var s = Snap('#world');
        var text = s.text(821, 1385, '');
        text.attr({
            fill: '#FAD411',
            fontSize: "15vw",
            fontFamily: "toolbar"
        });
    });
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jamez14pro
0viewers