Skip to content
Related Articles

Related Articles

How to use font awesome icon as a cursor ?
  • Last Updated : 28 May, 2020

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :