Adding FontAwesome icons to a D3 graph

Question

I am trying to set an icon with FontAwesome instead of text in my D3 nodes. This is the original implmentation, with text:

g.append(\'svg:text\')
    .attr(\         


        

Answer 1

For those who want to use svg icons from FontAwesome with D3, this snippet should work:

btnGroup.append("g")
  .attr("width", 16)
  .attr("height", 16)
  .attr("class", "fas fa-check-square");

The only drawback here is that width and height are not inherited from CSS. The good news is that class toggling works as expected with d3 and jquery.

Demo with toggling on click: https://jsfiddle.net/diafour/6fagxpt0/