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

possible duplicate of [SVG text element with Unicode characters](http://stackoverflow.com/questions/5830991/svg-text-element-with-unicode-characters) — Blazemonger, Aug 29 '13 at 15:54
Just as a tip, you should not use jQuery SVG wiht jQuery versions 1.8 or higher. It has some conflicts with those versions. For example .width() and .height() return strings ("30px") instead of numbers. I ended up just using plain jQuery and to dynamically create elements use: $(document.createElementNS('http://www.w3.org/2000/svg', "rect")); instead of $("") — Hoffmann, Aug 29 '13 at 16:02

score 4 · Accepted Answer · edited May 23 '17 at 10:25

4

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

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

edited May 23 '17 at 10:25

Community

1
1

answered Aug 29 '13 at 15:55

Blazemonger

90,923
26
142
180

how did you find this `\uf040'` ? – Tushar Gupta - curioustushar Aug 29 '13 at 15:58
1

@TusharGupta It's nearly identical to the original ``. – Blazemonger Aug 29 '13 at 15:58

Phrogz · Answer 2 · 2013-08-29T16:14:25.750

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>

score 0 · Answer 3 · answered Jun 04 '14 at 08:14

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

Using Font Awesome with jQuery SVG

3 Answers3

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