How to render glyphs from FontAwesome on a Canvas element

Question

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?

Accepted Answer

You should use String.fromCharCode :

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

or this syntax for Unicode escapes :

```
ctx.fillText("\uf000", 20, 20);
```

How to render glyphs from FontAwesome on a Canvas element

Solution

Problem

Related problems