Как я могу использовать иконки FontAwesome на холсте HTML 5 - PullRequest
Новая
       7

Как я могу использовать иконки FontAwesome на холсте HTML 5

0 голосов
/ 10 февраля 2019

У меня проблема с использованием иконок FontAwesome на холсте HTML 5, я попробовал это: 

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

var h = 'F1E2';

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

Я попытался импортировать файл CSS FontAwesome, но это не сработало!Кто-нибудь может мне помочь с этим?

Спасибо!

1 Ответ

0 голосов
/ 10 февраля 2019
  • Во-первых, если вы используете FA5, используйте Font Awesome 5 Free.Если вы используете FA4, вы можете просто использовать FontAwesome.
  • Вам нужно установить высокое значение шрифта-веса (например, 600).

Пример: 

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.com/releases/v5.0.9/css/all.css');
canvas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 600;
}
<canvas id="canvas"></canvas>
...