如何在html 5画布上使用FontAwesome图标

Question

I have a problem with using FontAwesome icons in my HTML 5 canvas, I tried this:

ct.fillStyle = "black";
ct.font = "20px Font Awesome";
ct.textAlign = "center";

var h = 'F1E2';

ct.fillText(String.fromCharCode(parseInt(h, 16)), x, y);

I tried importing the FontAwesome CSS file but it didn't work! Can anybody help me with this?

Thanks!

Answer 1

• First, if you're using FA5, use Font Awesome 5 Free . If you're using FA4, you can just use FontAwesome .
• You need to set the font-weight to a high value (like 600).

Example:

 var ctx = canvas.getContext("2d"); document.fonts.ready.then(_ => { ctx.font = '600 48px "Font Awesome 5 Free"'; ctx.fillStyle = "black"; setTimeout(_ => ctx.fillText("\", 45, 45), 200); }); 

 @import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css'); canvas { font-family: 'Font Awesome 5 Free'; font-weight: 600; } 

 <canvas id="canvas"></canvas>