How to use font awesome icon as a cursor ?

Making a simple cursor look like a car, a beverage, an emoji or any other shape or symbol looks fascinating. We can actually change the cursor to any font awesome icon on the webpage. To add any font awesome icon to the cursor, we need to add the font-awesome CDN inside the header section.

There is a CSS cursor property to change the type of a cursor. It also allows adding an image in the cursor property.

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

So, to add a Font Awesome icon as a cursor, we first need to make the Font Awesome icon into an image. We can do this with the help of canvas in HTML. Then provide that image as a URL to the cursor property.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
        rel="stylesheet" />
    <script src=
    </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>

chevron_right


Output:
output



All Unicode for font awesome icons can be found at https://fontawesome.com/cheatsheet

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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.