CODEWITHSUNDEEP
jquerysvgjquery-svg
Bryan Young
Bryan Young

Reputation: 654

Using Font Awesome with jQuery SVG

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

Upvotes: 3

Views: 1384

Answers (3)

forresto
forresto

Reputation: 12387

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

Upvotes: 0

Phrogz
Phrogz

Reputation: 303254

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>

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92903

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

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

Upvotes: 4

Related Questions