使用字体awesome作为光标

Question

我想在等待时更改光标图标，使用我在这里找到的以下代码：

​

var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 110;
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000000";
ctx.font = "20px FontAwesome";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("\uf245", 35, 25);
ctx.font = "35px FontAwesome";
ctx.fillText("\uf013", 55, 15);

var dataURL = canvas.toDataURL('image/png')
$('body').css('cursor', 'url(' + dataURL + '), auto');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

​

谁知道我能不能让齿轮转动？

Answer 1

只需使用CSS cursor:wait即可。这使用用户自己的光标设置，这是您应该使用的，因为这有助于用户更容易地理解进程正在运行。一致性非常重要。

​

html,body {height:100%}
body {cursor:wait}

​

我觉得挺好的。