Font Awesome icon in RaphaelJS

Question

I'm trying to add a Font Awesome icon to a canvas in RaphaelJS.

Here is what I have so far: jsFiddle

canvas = Raphael('my-canvas', 100, 100);
var myIcon = canvas.text(50,50,'\uf056');
myIcon.attr('font-size', 40);
myIcon.attr('fill', '#000');
myIcon.attr('font-weight', '300');
myIcon.attr('font-family','FontAwesome');

(my code is based on this question: Font awesome with raphael js)

The icon is displayed in "solid" style, but I would like to change the style to "regular" or "light". I have tried setting the font-weight to 300 and font-family to "Font Awesome 5 Pro" as described here without any success.

I have also tried this in my local development environment using an active Font Awesome Pro license with the same result. I did however find that if I disable legacy support for Font Awesome 4, the icons no longer show up. Maybe this solution is no longer supported in Font Awesome 5?

Any tips or pointers in the right direction would be greatly appreciated!

Answer 1

According to this the font has to be set to "Font Awesome 5 Pro" to display the icons as "light" or "regular". But my problem was getting Raphael JS to use the correct font. Setting any font-family except 'FontAwesome' only resulted in squares being displayed.

The solution is surprisingly simple. Just add extra quotes to the font string and the icons are displayed correctly!

myIcon.attr('font-family',"'Font Awesome 5 Pro'");