Javascript 如何获得字体Awesome5图标作为光标

在Font Awesome 4x中，我通过将光标更改为base-64图像url，成功地将其设置为图标。现在在字体5中，它不再工作了

我找到了解决办法，但在这里不起作用

这就是我尝试过的

var canvas = document.createElement("canvas");
canvas.width = 20;
canvas.height = 20;
var ctx = canvas.getContext("2d");
document.fonts.ready.then(function() {
    ctx.font = "400 20px Font Awesome 5 Pro";
    ctx.fillStyle = "red";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    setTimeout(function() {
        ctx.fillText("\uf2ed", 10, 10)
        var dataURL = canvas.toDataURL('image/png')
        $('#foo').css('cursor', 'url(' + dataURL + '), auto');
    }, 200)
})

我得到的只是一个20x20的黑色正方形

---

有人知道如何完成吗？

请参见下面的示例

var hex=0xF25A；
var unicode=String.fromCharCode（parseInt（十六进制，16））；
var canvas=document.getElementById（“缓存”）；
画布宽度=64；高度=64；
var context=canvas.getContext（“2d”）；
context.font='900 32px“font Awesome 5 Free'；
context.fillText（unicode，canvas.width/2，canvas.width/2）；
document.fonts.ready.then（函数（）{
$（'body'）.css（'cursor'，'url（'+canvas.toDataURL（'image/png'）+'）），auto'）；
});
html，正文{高度：100%；宽度：100%；边距：0；填充：0；}
画布#缓存{显示：无；}
谢谢您的回答！效果很好。