如何获得Font Awesome 5图标作为光标

Question

在Font Awesome 4x中，我设法通过将光标更改为base-64图像URL来将其设置为图标。 现在，在Font Awesome 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的黑色正方形

有谁知道如何完成它？

Answer 1

见下面的例子...

 var hex = 0xF25A; var unicode = String.fromCharCode(parseInt(hex, 16)); var canvas = document.getElementById("cache"); canvas.width = 64; canvas.height = 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(function() { $('body').css('cursor', 'url(' + canvas.toDataURL('image/png') + '), auto'); }); 

 html, body {height: 100%; width:100%; margin:0; padding: 0;} canvas#cache {display: none;} 

 <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.2.0/css/solid.css" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z" crossorigin="anonymous"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="cache"/>