javascript - Adding FontAwesome icons to a D3 graph -
i trying set icon fontawesome instead of text in d3 nodes. original implmentation, text:
g.append('svg:text') .attr('x', 0) .attr('y', 4) .attr('class', 'id') .text(function(d) { return d.label; });
and try icons:
g.append('svg:i') .attr('x', 0) .attr('y', 4) .attr('class', 'id icon-fixed-width icon-user');
but not working, though markup right, , css rules hit: icons not visible.
any idea why?
here related jsbin
edit
i have found alternative 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 want do, not work <i>
elements used fontawesome.
you need use proper unicode inside normal text element, , set font-family "fontawesome" 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 render "icon-smile" icon. unicodes fontawesome icons can found here:
http://fortawesome.github.io/font-awesome/cheatsheet/
be aware need adapt codes in cheatsheet html/css unicode format javascript unicode format 
must written \uf118
in javascript.
Comments
Post a Comment