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:
<!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:
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
Share your thoughts in the comments
Please Login to comment...