如何将 Font Awesome 5 图标作为光标答案

【问题标题】：How to get a Font Awesome 5 icon as cursor如何将 Font Awesome 5 图标作为光标
【发布时间】：2018-08-20 13:38:05
【问题描述】：

在 Font Awesome 4x 中，我设法将光标设置为图标，方法是将其更改为 base-64 图像 url。现在在 Font Awesome 5 中它不再起作用了。

我找到了this 解决方案，但在这里不起作用。

这是我尝试过的。

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 jquery canvas font-awesome font-awesome-5

【解决方案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"/>

【讨论】：

感谢您的回答！效果很好。

【解决方案2】：

这是一个老问题，但我成功使用了jquery.awesomecursor，还有这个JS：

   $('body').awesomeCursor('cut', {color: '#3097d1',
                                    font: {cssClass: 'far fa-%s',
                                           family:'"Font Awesome 5 Pro"'
                                          }
                                   });

这里的关键是： . FontAwesome 5 的 cssClass（“常规”图标是 'far fa-X'，而不是之前版本中的 'fa fa-X'） .指定“家庭”的方式 - 我需要内部的引号集才能使其工作。

FWIW，我在 WebPack 中使用它，所以我需要确保 faCut 是从“@fortawesome/pro-regular-svg-icons”加载的；你可以阅读更多关于这个here的信息。

【讨论】：