admin管理员组

文章数量:1024026

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
Share Improve this question edited Feb 10, 2019 at 12:09 JoshG 6,7452 gold badges41 silver badges64 bronze badges asked Feb 10, 2019 at 11:01 Gobli gamingGobli gaming 491 silver badge6 bronze badges 1
  • 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
Add a ment  | 

1 Answer 1

Reset to default 6
  • 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>

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
Share Improve this question edited Feb 10, 2019 at 12:09 JoshG 6,7452 gold badges41 silver badges64 bronze badges asked Feb 10, 2019 at 11:01 Gobli gamingGobli gaming 491 silver badge6 bronze badges 1
  • 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
Add a ment  | 

1 Answer 1

Reset to default 6
  • 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>

本文标签： javascriptHow can I use FontAwesome icons on a html 5 canvasStack Overflow

版权声明：本文标题：javascript - How can I use FontAwesome icons on a html 5 canvas - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745494845a2153122.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。