How to render glyphs from FontAwesome on a Canvas element

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?

You should use String.fromCharCode :

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

or this syntax for Unicode escapes :

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

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   How to disable Javascript when using Selenium?

Similar Posts