76

I have an svg that includes images:

<g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g>

How do I replace that line w/ a font awesome icon:

<g><i class="icon icon-cloud-download" x="12" y="15" width="10" height="10"></i></g>

doesn't seem to work as the image doesn't show up.

Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
user_78361084
  • 3,538
  • 22
  • 85
  • 147

3 Answers3

130

i is not valid SVG. You need to include the actual character that displays the icon. If you take a look at font awesome's stylesheet you will see...

.icon-group:before                { content: "\f0c0"; }
.icon-link:before                 { content: "\f0c1"; }
.icon-cloud:before                { content: "\f0c2"; }
.icon-beaker:before               { content: "\f0c3"; }
.icon-cut:before                  { content: "\f0c4"; }
.icon-copy:before                 { content: "\f0c5"; }
.icon-paper-clip:before           { content: "\f0c6"; }
.icon-save:before                 { content: "\f0c7"; }
.icon-sign-blank:before           { content: "\f0c8"; }
.icon-reorder:before              { content: "\f0c9"; }
.icon-list-ul:before              { content: "\f0ca"; }
.icon-list-ol:before              { content: "\f0cb"; }
.icon-strikethrough:before        { content: "\f0cc"; }
.icon-underline:before            { content: "\f0cd"; }
.icon-table:before                { content: "\f0ce"; }

But those are unicode characters encoded for CSS. In SVG you would need to change the syntax of example \f040 to:

<g><text x="0" y="0">&#xf040;</text></g>

And then in your stylesheet add:

svg text {
   font-family: FontAwesome;
}

According to Niek's comment, if you use the free version of Font Awesome 5+, you must use the following font-family declaration:

svg text {
   font-family: 'Font Awesome 5 Free';
}
methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • @Duopixel This solution only works, if the svg is part of the website, where FontAwesome (css) is loaded, right? Is there a way, to include a single font into an "stand-alone" svg file? This file should be readable "offline" without loading the css files from webserver. Like a bundle: svg and FontAwesome definition into one svg file. – The Bndr Aug 13 '13 at 12:38
  • 1
    To have a standalone SVG with the embedded font you would need to embed the font as a data uri, if you need the details please open a new question. – methodofaction Aug 13 '13 at 15:39
  • @Duopixel I have added a new question: http://stackoverflow.com/questions/18225954/use-fontawesome-icon-in-svg-without-external-files maybe you have an idea, how to solve it – The Bndr Aug 14 '13 at 07:49
  • 1
    For some reason it doesn't work for me. I have `&#xf040` and style `.svg-icon { font-family: FontAwesome; }` but it doesn't help. FontAwesome.css is attached to the page. And the icon shows as text. Why so? – sedovav Oct 27 '14 at 17:09
  • 31
    @sedovav:here's what I had to do to make it work in d3.js. http://stackoverflow.com/a/12883617/127203. Basically the text should be "\uf040". – Glenn Jan 07 '15 at 23:34
  • 2
    @Glenn u da real MVP! – Joum Feb 12 '16 at 17:20
  • Didn't you forget a semi-colon after the html escaped character string? So: `` – Vincent Sels Apr 14 '16 at 08:02
  • @VincentSels yes, semi-colon should be added, not sure why this wasn't noticed before. – methodofaction Apr 14 '16 at 15:14
  • 2
    @Glenn - maybe you should edit the answer - \u works, &x definitely doesn't. – manassehkatz-Moving 2 Codidact Oct 25 '17 at 02:12
  • 1
    Note: in version 5, the font-family attribute should be `font-family: 'Font Awesome 5 Free';` for free users. – Niek Jul 19 '21 at 14:03
27

my Demo

<!DOCTYPE html>
<html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div title="Code: 0xe800" class="the-icons span3">

      <H3>Standard using:</H3>
    <i class="fa fa-camera-retro fa-4x"></i>
    <br>
      <H3>SVG using:</H3>
  </body>
</html>

JS

var svg = d3.select("body")
  .append("svg")
  .attr("width", 250)
  .attr("height", 250);

svg.append("text")
  .attr("x",0)
  .attr("y",70)
  .attr("font-family","FontAwesome")
  .attr('font-size', function(d) { return '70px';} )
  .text(function(d) { return '\uf083'; });
WebBrother
  • 1,447
  • 20
  • 31
  • 3
    Thanks for the example with function(d) { return '\uf083'; }, took me a while to find this solution. – NPC May 03 '16 at 21:19
  • When I try to save this svg using window.btoa I am getting an error **Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.(…)** – Jerry Dec 07 '16 at 11:00
  • Thanks, but I wonder what the difference between using HTML entity and D3js `text` function to add string to an HTML element? like '\uf083' and  – Allen May 20 '17 at 03:48
  • This doesn't seem to be working for all codes \uf185 \uf186 \uf763 \uf7ad – HaBo Dec 16 '20 at 11:09
0

The below code works for me perfectly.

   svg.append('tspan')
        .attr('class', 'fa')
        .text('\uf05a')
Ajay Gangisetti
  • 431
  • 2
  • 5
  • 13