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

You need to use the proper Unicode inside a normal text element, and then set the font-family to "FontAwesome" like this:

 node.append('text')
    .attr('font-family', 'FontAwesome')
    .attr('font-size', function(d) { return d.size+'em'} )
    .text(function(d) { return '\uf118' }); 

This exact code will render an "icon-smile" icon. The unicodes for all FontAwesome icons can be found here:

http://fortawesome.github.io/Font-Awesome/cheatsheet/

Be aware that you need to adapt the codes in the cheatsheet from HTML/CSS unicode format to Javascript unicode format so that  must be written \uf118 in your javascript.