Hacer que un cursor simple parezca un automóvil, una bebida, un emoji o cualquier otra forma o símbolo parece fascinante. De hecho, podemos cambiar el cursor a cualquier ícono de fuente impresionante en la página web. Para agregar cualquier ícono de fuente increíble al cursor, debemos agregar el CDN de fuente increíble dentro de la sección del encabezado.
Hay una propiedad de cursor CSS para cambiar el tipo de un cursor. También permite agregar una imagen en la propiedad del cursor.
cursor: url(cursor1.png) 4 12, auto;
Entonces, para agregar un ícono de Font Awesome como cursor, primero debemos convertir el ícono de Font Awesome en una imagen. Podemos hacer esto con la ayuda de canvas en HTML. Luego proporcione esa imagen como una URL a la propiedad del cursor.
Ejemplo:
<!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=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-2.1.1.min.js">
</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>
Producción:
Todos los iconos Unicode para fuentes increíbles se pueden encontrar en https://fontawesome.com/cheatsheet
Enlace CDN de Font Awesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
Publicación traducida automáticamente
Artículo escrito por parasmadan15 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA