从引导图标十六进制值输出符号

Question

我已经学会了如何检索bootstrap图标值。

示例（带有glyphicon-trash图标）：

HTML：

<div id="icon" class="glyphicon glyphicon-trash"></div>

JS：

var iconSymbol = window.getComputedStyle($('#icon')[0], ':before').content;
var result = iconSymbol.charCodeAt(1).toString(16);
console.log(result);

之后result为e020。

但之后我需要将此符号绘制到canvas。

假设value是e020，我使用以下代码：

var label = String.fromCharCode(parseInt(value, 16));
var ctx = canvas.getContext("2d");
ctx.font = "52px Helvetica"
ctx.textAlign = "center"
ctx.fillStyle = "white"
ctx.fillText(label, pt.x, pt.y+4)

但之后我只有一个矩形符号。

我需要实现什么才能正确输出原始符号？可能是字体配置有问题，或者我必须尝试一些编码参数？

Answer 1

您需要使用与引导符号相同的字体，因为典型字体没有定义这些符号。 Helvetica没有这些，在大多数情况下它可能会恢复到默认的sans-serif字体，因为大多数用户没有安装Helvetica。

看一下字体：

glyphicons-halflings-regular.*

在fonts/ folder中找到。将此字体设置为画布，然后绘制符号。您可能必须通过DOM预加载字体。