Как получить значок Font Awesome 5 в качестве курсора

В Font Awesome 4x мне удалось установить курсор в качестве значка, изменив его на URL-адрес изображения base-64. Теперь в 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

Есть ли кто-нибудь, кто знает, как это сделать?


javascript canvas jquery font-awesome font-awesome-5
person ssten    schedule 20.08.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

см. приведенный ниже пример...

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"/>

person Martin Zeitler    schedule 20.08.2018
comment
Спасибо за Ваш ответ! Работает очень хорошо. - person ssten; 21.08.2018