Font Awesome Pro Icons in Diagram

[Mark]

Anyone by chance have any luck implementing fontawesome pro icons in a diagram? I was shown how to use the fontawesome free library icons like this:

g.append(new dataviz.diagram.TextBlock({
    text: String.fromCharCode(0xf005)  + " " + dataItem.firstName + " " + dataItem.lastName,
    x: 85,
    y: 20,
    fill: "#fff",
    fontFamily: "FontAwesome"
}));

... but this doesn't work:

g.append(new dataviz.diagram.TextBlock({
    text: String.fromCharCode(0xf82c)  + " " + dataItem.firstName + " " + dataItem.lastName,
    x: 85,
    y: 20,
    fill: "#fff",
    fontFamily: "FontAwesome"
}));

FontAwesome Icon Cheatsheet: https://fontawesome.com/cheatsheet/pro/regular

[George Gindev]

Hello Mark,

I believe this is the solution to use the Font Awesome 5 Pro. 

To use the font, it makes sense to embed it like follows, just like embedding FontAwesome:

fontFamily: "Font Awesome 5 Pro";

However, when the font name string contains space characters, the CSS parser requires it to be wrapped in quotes. So the inner string (between the double quotes) must be wrapped in another set of quotes, this time a single quote (  '  ):

fontFamily: "'Font Awesome 5 Pro'";

This sends a correctly formatted string, and the CSS can parse it properly.

Please test this solution and let me know if implemented successfully or if any further questions arise.

Regards,
George Gindev
Progress Telerik

[Mark]

George, thank you so much. This worked well.