1

I'm trying to embed some font-awesome icons within a D3 visualization which is using SVG. I've found some solutions that get me part of the way such as:

How do I include a font awesome icon in my svg?
Adding FontAwesome icons to a D3 graph

These are a great starting point but seem to only work with a basic character. What I'd like to do however is use some of the font-awesome stacking features to make composite icons. Has anyone ever tried to do this before in SVG? Or is this simply not going to be possible?

When I've tried to put an example together, I've had to include the characters in 2 different text elements (I really wanted them inside one) and I feel like I'm now in a whole world of pain with regards to manually sizing or positioning myself. Does anyone have a possible resolution on how this might be achievable?

I've included where I've got to so far, red being the desired output, green being the SVG.

span { 
 border: thin solid red;   
}

svg {
    border: thin solid green;
}

text {
    fill: black;
    font-family: 'FontAwesome';
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle-o fa-stack-2x"></i>
    <i class="fa fa-info fa-stack-1x"></i>
</span>

<svg width="100" height="100">
    <text x="50" y="50">&#xf10c</text>
    <text x="50" y="50"">&#xf129</text>
</svg>
Community
  • 1
  • 1
Ian
  • 33,605
  • 26
  • 118
  • 198

1 Answers1

2

If you look at the css of fa-stack-1x and fa-stack-2x, you'll see that there is some "manual" positioning going on. You can translate those into valid SVG. On the "outer" stack:

text-anchor="middle" style="font-size: 2em" alignment-baseline="middle"

And inner stack:

text-anchor="middle" alignment-baseline="middle"

Produces:

span { 
 border: thin solid red;   
}

svg {
    border: thin solid green;
}

text {
    fill: black;
    font-family: 'FontAwesome';
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle-o fa-stack-2x"></i>
    <i class="fa fa-info fa-stack-1x"></i>
</span>

<svg width="100" height="100">
    <text x="50" y="50" text-anchor="middle" style="font-size: 2em" alignment-baseline="middle">&#xf10c</text>
    <text x="50" y="50" text-anchor="middle" alignment-baseline="middle" >&#xf129</text>
</svg>
Mark
  • 106,305
  • 20
  • 172
  • 230
  • Hmm ok - so there's always going to be some manual positioning. I guess then, is there a way that I can re-use some of this (or will I have to move over to my own CSS) as I don't want in-line styles for this sort of stuff? – Ian Feb 03 '15 at 15:00
  • how to get the codes `` from the name of the icon (e.g. phone)? – bachr May 04 '15 at 14:30
  • 2
    @elsoufy - Unicode can be found here: http://fortawesome.github.io/Font-Awesome/cheatsheet/ – Adam_O Nov 02 '15 at 14:37