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!

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!

• javascript
• html
• html5-canvas
• font-awesome

• did you download it on your machine or you tried accessing it online? locally: fontawesome./how-to-use/on-the-web/setup/…; online: fontawesome./start – mdln97 Commented Feb 10, 2019 at 11:05

1 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("\uF200", 45, 45), 200);
});

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

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