Question

85

Adding FontAwesome icons to a D3 graph

rated 0 times [ 87] [ 2] / answers: 1 / hits: 48162 / 11 Years ago, sat, august 24, 2013, 12:00:00

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('x', 0)

    .attr('y', 4)

    .attr('class', 'id')

    .text(function(d) { return d.label; });

And now I try with icons:

g.append('svg:i')

   .attr('x', 0)

   .attr('y', 4)

   .attr('class', 'id icon-fixed-width icon-user');

But this is not working, even though the markup is right, and the CSS rules are properly hit: the icons are not visible.

Any idea why?

Here is the related jsbin

EDIT

I have found this alternative to insert images: http://bl.ocks.org/mbostock/950642

node.append(image)

    .attr(xlink:href, https://github.com/favicon.ico)

    .attr(x, -8)

    .attr(y, -8)

    .attr(width, 16)

    .attr(height, 16);

Which is exactly what I want to do, but it does not work with <i> elements used by FontAwesome.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kiyam

Add To Favorites

Follow

Total Points: 448

Total Questions: 96

Total Answers: 92

Location: Philippines

Member since Sat, Jul 11, 2020

4 Years ago

answered 11 Years ago mira · Accepted Answer

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.