23

FontAwesome specifies glyphs in its CSS file like so:

/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure 
    screen readers do not read off random characters that represent icons */
.icon-glass:before                { content: "\f000"; }
.icon-music:before                { content: "\f001"; }

I am trying to render icons from this font to a canvas element but can't see how to access these glyphs.

ctx.font = "40px FontAwesome";
ctx.fillText("\f000",20,20); // no cigar

How do I specify these glyphs in JavaScript strings?

Michael Forrest
  • 3,461
  • 4
  • 22
  • 35

1 Answers1

25

You should use String.fromCharCode :

ctx.fillText(String.fromCharCode("0xf000"), 20, 20);

or this syntax for Unicode escapes :

ctx.fillText("\uf000", 20, 20);
Romain Meresse
  • 3,044
  • 25
  • 29
  • 2
    This worked for me, using this format: `createjs.Text('\uf178', '100px FontAwesome, 'red')`. Thanks a lot. – ITWitch Dec 27 '16 at 07:31
  • 1
    I got here looking to render Material Design Icons on a canvas. For me, `String.fromCodePoint(0xF0625)` did the trick. Where `F0909` corresponds to the value found in the CSS `content` attribute: `.mdi-help-circle-outline::before { content: "\F0625"; }` – mediafreakch Feb 09 '21 at 12:36
  • Be careful, String.fromCodePoint is not implemented by all browsers (IE again) : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint – Romain Meresse Feb 11 '21 at 14:13