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 &#xf118; must written \uf118 in javascript.


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -