CSS, D3

Fix: Some FontAwesome Unicodes Show Up as Squares

If some of the unicodes work, but not others:

Check to see if the font icon you’re using is pro-only. Or maybe it’s more subtle than that: only the solid version is free. If so, make sure that you specify the font-weight to 600 or above to use the solid version:

font-weight: 600;
font-family: "Font Awesome 5 Free";

Also for reference, notice the difference in format:

// To use inside <div> directly:
<div>&#xf055</div>

// To use in div::after
div::after { content: "\f055"; }

// To use inside SVG (D3):
g.append('text').text('\uf055');
Standard

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.