How to draw Font Awesome Icons onto html canvas [Version <5]

Question

How can I draw Font Awesome characters (Icons Glyphs) onto html5 canvas? I am using an older version of Font Awesome.

How can I style those drawn characters?

Answer 1

how to use font icons (Font Awesome) in html canvas

you can inspect the fontawsome .css file and get what code has been used for each icon.

For Eg: If you see the file for the code used to get the icon fa-info-circle, its as below

.fa-info-circle:before {
  content: "\f05a";
}

So try context.font = '\uf05a'; // this will give you fa-info-circle. And remember to add the \u before the code. Also you need to mention the font family as FontAWsome