Using Font Awesome with jQuery SVG

Question

With a little help from this question, I was able to show font awesome icons in static SVG. But our app uses jQuery SVG, and it doesn't seem to be allowing SVG escape characters. Here's a demo showing both running side by side:

http://jsfiddle.net/scruffles/m6Z7Y/4/

<text x="30" y="30">&#xf040</text>

Renders as a pencil, but

svg.text(g, 30, 30, '&#xf040');

renders as &#xf040

Answer 1

As per this answer, you should use svg.text(g, 30, 30, '\uf040'); instead.

http://jsfiddle.net/mblase75/m6Z7Y/6/

Answer 2

In JavaScript, instead of using the entity, you can either use raw Unicode in your JavaScript source (copy/paste the character), or use a Unicode escape sequence in your plain ASCII JavaScript code:

svg.text(g, 30, 60, '');       // A unicode f040 character
svg.text(g, 30, 30, '\uf040');

Demo: http://jsfiddle.net/m6Z7Y/7/

---

_{Also, note that XML entities begin with an ampersand and end with a semicolon—&…;—so you need a semicolon at the end for valid XML markup:}

<text x="30" y="30">&#xf040;</text>

Answer 3

I generated an object with the Font Awesome names and aliases as keys and unicode characters as values. That way you can make things more readable like this:

svg.text(g, 30, 60, FONT_AWESOME.pencil);

Here is the full list: https://github.com/the-grid/the-graph/blob/master/the-graph/font-awesome-unicode-map.js