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

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

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

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

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

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程