Appending Fontastic Icons to SVG with D3.js

Asked Aug 11 '19 at 07:42

Active Aug 11 '19 at 07:42

Viewed 85 times

But this is the first time working with custom Fontastic font and something odd is going on.

I've got the stylesheet link and referencing direct in the HTML is working perfectly:

 <span class="icon-01"></span>
 <i class="icon-02"></i>

I then add a text element in the same way I would FontAwesome/Linear Icons (written in HTML for ease of testing):

  <svg width="100" height="40">
  <text x="20" y="20" style="font-family: untitled-font-3">\ue907</text>
  </svg>

I get icons but all of them!

Any ideas?

asked Aug 11 '19 at 07:42

Bmil

1

It would be helpful if you could set up a [mcve] demonstrating your issue. – altocumulus Aug 11 '19 at 08:50
I'm not sure the client will be happy with me sharing their font. – Bmil Aug 11 '19 at 08:58
Lots of examples in the medium article though. What I really need it to find someone who has done this before??? – Bmil Aug 11 '19 at 09:24
1

Lots of examples, but not with Fontastic; Also, those examples don't change the fact that we cannot debug your code with the info you shared: without a [MCVE] there is little we can do. – Gerardo Furtado Aug 11 '19 at 09:32
Too true... https://codepen.io/bmpms/pen/qeJxQM – Bmil Aug 11 '19 at 09:36
Also just updated it so that you have the original svg and text in the html AND a d3 script at the bottom.... Probably something obvious but it escapes me... – Bmil Aug 11 '19 at 09:42
As you can clearly see in your example, `\ue907` is treated as five separate characters, generating one icon for each one of them. Just do "\" and you'll see the "edit" icon. This PUA is not working. I suggest you contact the Fontastic team directly. – Gerardo Furtado Aug 11 '19 at 09:56
Thank you. That was obvious! I'll get back if Fontastic solve the problem for me.. – Bmil Aug 11 '19 at 10:29
Meanwhile any other ideas welcome. – Bmil Aug 11 '19 at 10:36

0 Answers0