Open In App

How to use font awesome icon as a cursor ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:




<!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>


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



Last Updated : 28 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments