如何使用字体超棒的图标作为光标

让一个简单的光标看起来像一辆汽车、一种饮料、一个表情符号或任何其他形状或符号，看起来很迷人。我们实际上可以把光标改成网页上的任何字体厉害的图标。要在光标上添加任何字体厉害的图标，我们需要在标题部分里面添加字体厉害的CDN。

有一个CSS光标属性可以改变光标的类型。它还允许在光标属性中添加一个图像。

cursor: url(cursor1.png) 4 12, auto;

因此，要把Font Awesome图标添加为光标，我们首先需要把Font Awesome图标变成一张图片。我们可以用HTML中的canvas来做这件事。然后将该图像作为URL提供给光标属性。

示例:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
        rel="stylesheet" />
    <script src=
        "https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
    <title>Font Awesome Cursor</title>
  
    <style>
        body {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
  
        p {
            color: #4cb96b;
        }
    </style>
</head>
  
<body>
    <p>GeeksforGeeks</p>
  
    <script>
         $(function () {             var canvas = document.createElement("canvas");                // Width and height of canvas can             // be varied depending on the             // size of icon             canvas.width = 30;             canvas.height = 28;                // Set interval for allowing the             // font awesome icon to load             setInterval(() => {                 var ctx = canvas.getContext("2d");                    // Setting the color of the icon                 ctx.fillStyle = "#4CB96B";                    // Set size of cursor                 ctx.font = "24px fontawesome";                    // '\uf0f9' is the unicode of                 // the font awesome icon                 ctx.fillText("\uf25a", 0, 20);                    // Converting the canvas to image                 var dataURL = canvas.toDataURL("image/png");                    // Setting the cursor property                 // to the image created$ ("body").css(
                    "cursor", "url(" + dataURL + "), auto");
            }, 1000);
        });
    </script>
</body>
  
</html>

输出:
如何使用字体超棒的图标作为光标？