Font-awesome: Using font awesome in D3 no longer works

[yuanzhou]

I used to use Font Awesome 4 with D3 to render icons in SVG.

svg.append("text") .attr('font-family', 'FontAwesome') .text('\uF05A\n')

But this no longer works with Font Awesome 5. I've tried all means but couldn't figure this out.

svg.append("text") .attr('font-family', 'Font Awesome 5 Free') .text('\uF05A\n')

Any suggestions?

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Sorry, I can't help.

Please note that Font Awesome now has its own SVG framework and provides individual svg files for icons that may help in your use case

Leaving this open, waiting feedback from the community

[mreve]

For anyone who arrives here, you can use

svg.append('svg:foreignObject')
    .html('<i class="fas fa-info-circle"></i>');

[nicolae536]

This aproach does not work in safari

svg.append('svg:foreignObject')
    .html('<i class="fas fa-info-circle"></i>');

[bennimmo]

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")

[JuliaHelmecke]

Thanks @bennimmo, it works perfectly!

[Mifrill]

unfortunately, it's working for me too :(

• svg:foreignObject nope
• replace into .attr("class", "fa") - nope

any updates on this?

[tagliala]

Hi,

Given that:

• I'm not a JavaScript developer
• I do not use/know D3
• Font Awesome 5 provides individual SVG files that may be useful for this use case

Does this help? https://jsfiddle.net/tagliala/10zepchb/23/

I've commented relevant JavaSript lines

[JuliaHelmecke]

Maybe – with the latest FontAwesome version in mind – you have to use .attr("class", "fas") instead?
I did not try it though...

[Mifrill]

@tagliala , @JuliaHelmecke thanks for the responses.

yeah, it's working natively, like this:

but, not in my case:

those solutions are not working for me, probably it's relate to ember shim's ember-d3 or of @fortawesome/ember-fontawesome.

I've make it works, by this approach:

    import { htmlSafe } from '@ember/string';
    import { icon, toHtml } from '@fortawesome/fontawesome-svg-core';

    let faIconPath = htmlSafe(toHtml(icon({
      prefix: 'fas', iconName: 'info-circle'
    }).abstract[0].children[0]));

    svg.append('svg').html(faIconPath);

so it looks like, my case is not about the FortAwesome issue only, it's more about upgrade packages in usage cases.

anyway thanks!

[bricksphd]

For others who come this way, FA added spaces in the font-family names when they went from v.4 to v.5. If you add single quotes around the font-family name inside double quotes, it seems to resolve the issue:

svg.append("text")
            .attr('font-family', "'Font Awesome 5 Free'")
            .text('\uf233')