Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use font awesome icon as a cursor?
In general, we see the design of cursor on any web page as an arrow by default or we can change the type of cursor to a particular type using cursor property of the CSS and assign it any kind of cursor of our choice such as pointer, grab, zoom in, zoom out etc. But, did you know? That we can change the type of cursor to any other type then the ones provided by the CSS. It is possible, as we can use any image to assign the design style to a cursor and can use any font-awesome icon of our choice to change the cursor type to our choice.
Change a cursor to a Font-Awesome icon
To change a cursor into a font-awesome icon, we first need to embed the font-awesome CDN to our HTML document and then we need to change the icon of our choice into an image to assign it as a value to the image URL of cursor property in CSS. We can change the Font-Awesome icon to an image using the canvas element of HTML. The canvas element will help us to change the font awesome icon into an image to change the cursor from default style to font awesome icon. We can give our own styles like font color, height width of the canvas, font size to specify the size of the cursor and more styles to the canvas element while creating.
Let us now understand it in details by practically implementing it with the help of code example.
Algorithm
Step 1 − In the first step, we will create a canvas element using the JavaScript by writing the script inside the script element inside the body tag.
Step 2 − In this step, we will grab the body element using its ID as we will assign the cursor property to the body element using the JavaScript.
Step 3 − In the next step, we will set the dimensions of the canvas element by giving it some width and height.
Step 4 − In the final step, we will get the final work done by assigning the properties to the canvas element and creating the image "url" to set it as a value to the cursor property of the body element.
Example
The below example will explain how you can change the default cursor from a font awesome icon by creating an image url using the canvas element −
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
</head>
<body id = "body">
<h1>Use font awesome icon as a cursor</h1>
<p class = "result">Cursor will change once you hover the text or body element area on the web page.</p>
<script>
var canvas = document.createElement('canvas');
var body = document.getElementById('body');
canvas.width = 30;
canvas.height = 30;
setInterval(() => {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#40a944";
ctx.font = "25px fontawesome";
ctx.fillText("\uf2c5", 0, 20);
var imgCreated = canvas.toDataURL("image/png");
body.style.cursor = "url(" + imgCreated + "), auto";
}, 1000);
</script>
</body>
</html>
In the above example, we have changed the default cursor with a font awesome icon by creating an image of the icon and then create the link if the image to assign it as a value to the cursor property of the body element.
Let us see one more code example, in which we will change the cursor from some other font awesome icon using the same method.
Algorithm
The algorithm of the above example and this example is almost same, you just need to replace the unique code of the font awesome while assigning the value to the fillText property of the canvas element.
Example
Below example will illustrates how to convert cursor from a font awesome icon −
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
</head>
<body id = "body">
<h1>Use font awesome icon as a cursor</h1>
<p class = "result">Cursor will change once you hover the text or body element area on the web page.</p>
<script>
var canvas = document.createElement('canvas');
var body = document.getElementById('body');
canvas.width = 40;
canvas.height = 40;
setInterval(() => {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#40a944";
ctx.font = "25px fontawesome";
ctx.fillText("\uf02d", 0, 20);
var imgCreated = canvas.toDataURL("image/png");
body.style.cursor = "url(" + imgCreated + "), auto";
}, 1000);
</script>
</body>
</html>
In this example, we have seen how we can change the cursor on the web page with different font awesome icons with the help of same method as used in the above example.
Conclusion
In this article, we have learnt how we can change the default cursor to any of the font awesome icon just by creating an image link using the toDataURL() method of the canvas element. We have seen and implement this with the help of two different code examples. By the end of this article, you all are able to change the default cursor to any of the font awesome icon of your choice.
95 Views
