Font awesome with raphael js

Question

What I want is to create a simple circle with raphaeljs that will have the facebook's 'f' inside (this will also be used for other similar cases). The 'f' symbol will be produced by font-awesome.

What I have done (and did not work) is to set the font family using css and/or as a raphael attribute.

The code is the following:

HTML

<div id='share-facebook'></div>

CSS

#share-facebook {
  font-family: FontAwesome;
}

Javascript

var canvas = Raphael('share-facebook', 100, 100);
var facebookWrapper = canvas.circle(50,50,50);
facebookWrapper.attr('fill', '#E3E3E3');
facebookWrapper.attr('stroke','none');
var facebookText = canvas.text(50,50,'&#xf09a');
facebookText.attr('font-size', 40);
facebookText.attr('fill', '#fff');
facebookText.attr('font-family','FontAwesome');

Here is also a fiddle to make your life easier. From what I have seen the issue is that raphaels places the character inside a tspan inside the text node and it cannot be decoded. Anyone has an idea how to overcome this issue?

Answer 1

use canvas.text(50,50,'\uf09a'); instead of canvas.text(50,50,'&#xf09a'); and it works

Answer 2

Not really the answer you expect, but you can use Raphael free icons (http://raphaeljs.com/icons/) instead of FontAwesome. Each icon is a Raphael path you can then do:

paper.path(<icon path here>).attr({fill: "#000", stroke: "none"});

then I guess you can apply any transform, scaling, positionning as with any other path.

I did a little update on your fiddle to demonstrate http://jsfiddle.net/K6rrf/1/. I did not remove your code just added the 2 last lines...

Hope this helps a bit

Cheers