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.

Answer 2

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/

Answer 3

Given that the other answers don't work anymore (because d3js has been updated in the meanwhile) and because it's not a good solution to use svg:foreignObject due to compatability issues, here is an answer that works without having to use any hacks:

.append("text")      // Append a text element
.attr("class", "fa") // Give it the font-awesome class
.text("\uf005");     // Specify your icon in unicode (https://fontawesome.com/cheatsheet)

Here is a working example (click "Run code snippet" and the d3 code outputs three stars):

var icons = [1, 2, 3];

d3.select("body")
  .selectAll(".text")
  .data(icons)
  .enter()
  .append("text")       // Append a text element
  .attr("class", "fa")  // Give it the font-awesome class
  .text("\uf005");      // Specify your icon in unicode

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 4

Thanks to all that replied. My final solution is based on the answer by CarlesAndres:

g.append('text')
    .attr('text-anchor', 'middle')
    .attr('dominant-baseline', 'central')
    .attr('font-family', 'FontAwesome')
    .attr('font-size', '20px')
    .text(function(d) { return ICON_UNICODE[d.nodeType]; });

Be careful with your CSS: it takes precedence over the SVG attributes.

And this is the way it looks:

The good thing about this, compared to the foreignObject solution, is that events are properly handled by D3.

Answer 5

Font awesome 4.x versions are not supporting if we use as follows

svg.append('text')
   .attr('x', 15)
   .attr('y', -17)
   .attr('fill', 'black')
   .attr('font-family', 'FontAwesome')
   .attr('font-size', function (d) { return '20px' })
   .text(function (d) { return '\uf2b9' });

so replace this

.attr('font-family', 'FontAwesome')

with

.attr("class", "fa")

Hope it helps for FA 4.x

Answer 6

I'm truly new to d3, but font awesome works by styling an <i> element with a class attribute.

The only way I found is to append a foreignObject and set on it the relevant HTML needed by font awesome.

Reference:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject?redirectlocale=en-US&redirectslug=SVG%2FElement%2FforeignObject

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

Code:

g.append('svg:foreignObject')
    .attr("width", 100)
    .attr("height", 100)
    .append("xhtml:body")
    .html('<i class="icon-fixed-width icon-user"></i>');

Demo: http://jsbin.com/eFAZABe/3/