Stacking font-awesome icons within SVG - svg

Question

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>

Answer 1

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>