Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!