How can to implement FontAwesome v5 icons in D3js v4 and Angular 4

Question

Stack

FontAwesome v5
D3js v4
Angular 4

Scenario

I have a hierarchy tree with nodes that have option bubbles appended to it (think of it as Mickey Mouse balloon where the face is the node and the appended nodes are the ears). I would like those options to show an icon like FontAwesome's i for more information or x to delete.

mickey.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' });

I also imported the FontAwesome 5 javascript CDN in index.html

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Above is what we currently have. The left ear has .text('i') and the right is the FontAwesome icon I am trying to render.

Additonally, We are already using FontAwesome throughout the app using <i>'s, but I'm not sure how to use it as a font-family to be able to implement it with D3 in the SVG.

Possible Solution

I found this solution in another post which is almost exactly what I need but wasn't sure how to bring everything together.

Request

Can someone provide some sample code that shows how to import and use FontAwesome v5 in a D3.js V4 created text svg in Angular 4?

Thanks!

what have you tried? Please post some code so we can help you better. — pmkro, Feb 28 '18 at 18:49
I uploaded a picture. The right side is implementing FontAwesome as the font-family but the icon is not rendering — H. Trujillo, Feb 28 '18 at 19:04
Does [this](https://jsfiddle.net/btvvy44u/13/) help? Created an html element within a foreignObject. It was one of the responses on the link you posted. — pmkro, Feb 28 '18 at 19:27

score 4 · Accepted Answer · answered Feb 28 '18 at 19:34

4

To formalize the answer I created this fiddle. Append an svg:foreignObject onto the svg and add corresponding html to get font awesome character.

answered Feb 28 '18 at 19:34

pmkro

2,542
2
17
25

interesting that his original approach using UTF codes isn't working (which is how I've done it before). ForeignObjects always feel slightly wrong. – Ian Feb 28 '18 at 20:03
I think it's because I imported the new SVG js format, which is essentially the only thing different from the StackOverflow example I provided. – H. Trujillo Feb 28 '18 at 20:34

score 2 · Answer 2 · answered Oct 25 '18 at 17:21

This was answered down the bottom of the link above.

So for:

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' });

replace:

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

with

   .attr("class", "fa")

And remember to use the updated css link (also shown above).

How can to implement FontAwesome v5 icons in D3js v4 and Angular 4

2 Answers2