如何使用字体真棒图标作为光标？

使简单的光标看起来像汽车、饮料、表情符号或任何其他形状或符号，看起来很迷人。我们实际上可以将光标更改为网页上任何字体真棒图标。要将任何字体真棒图标添加到光标，我们需要在标题部分中添加字体真棒CDN。

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

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

因此，要添加 Font Awesome 图标作为光标，我们首先需要将 Font Awesome 图标制作成图像。我们可以借助 HTML 中的画布来做到这一点。然后将该图像作为光标属性的 URL 提供。

例子：

  

    
    
    
    
    
    
    Font Awesome Cursor
  
    
        body {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
  
        p {
            color: #4cb96b;
        }
    

  

    GeeksforGeeks
  
    
        $(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);
        });
    

  

输出：

可以在 https://fontawesome.com/cheatsheet找到所有用于字体真棒图标的 Unicode

Font Awesome CDN 链接： https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css