d3.js: append a span with glyphicon class

Question

The following piece of code is working properly. It draws me a circle. What I want is that inside this circle to draw a bootstrap glyphicon: <span class="glyphicon glyphicon-zoom-in"></span>

d3.json("relations", function(error, graph) {
    var links = svg.selectAll()
        .data(graph.links).enter();

    links        
      .append("circle")
      .attr("class", "circle")
      .attr("r", circle_r)
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

I have tried to do do the following continuing the previous code:

links .append("span") .attr("class", "glyphicon glyphicon-zoom-in")

but the symbol does not render. I guess there is something about positioning it, because with firebug/inspector I can see the <span> settled.

Does anyone knows how to do it? Thanks

Answer 1

I got this to work by adding the glyphicons like so:

link.append("svg:foreignObject")
    .attr("width", 20)
    .attr("height", 20)
    .attr("y", "-7px")
    .attr("x", "-7px")
  .append("xhtml:span")
    .attr("class", "control glyphicon glyphicon-zoom-in");

And by making the .glyphicon's position static:

.control.glyphicon {
  position: static;
}

Plnkr example here