Contenido

Introducción

Como probablemente ya sabrá, puede cambiar fácilmente la apariencia del cursor gracias a la propiedad CSS del cursor. Por ejemplo, el cursor: puntero le da la mano que señala. En realidad hay muchos valores incorporados, como puedes ver en csscursor.info. En ese sitio web, el icono de cursor más sorprendente es la mano de Papá Noel. Sí, puede utilizar un PNG personalizado o un SVG para el cursor!

Sintaxis

Para utilizar tu propio icono, debe proporcionar dos valores. El primer valor es una ruta a su archivo PNG o SVG, usando la sintaxis url() (como para la propiedad background).
El segundo valor es una apariencia de cursor de retroceso (entre los valores incorporados) en caso de que su archivo de imagen no se cargue. Normalmente dejo ese valor de reserva para el auto.

#my-custom-icon {
  cursor: url(path/to/custom-cursor.svg), auto;
}

Font Awesome

Me resulta muy fácil utilizar los iconos de Font Awesome para el cursor. Puede descargar los iconos como SVG y, a continuación, todo lo que necesita hacer es especificar una altura y un ancho (por ejemplo, 20×20) y eliminar los atributos innecesarios:

<svg height="20" width="20" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" ><path  d="M502.63 217.06L294.94 9.37C288.69 3.12 280.5 0 272.31 0s-16.38 3.12-22.62 9.37l-81.58 81.58L81.93 4.77c-6.24-6.25-16.38-6.25-22.62 0L36.69 27.38c-6.24 6.25-6.24 16.38 0 22.63l86.19 86.18-94.76 94.76c-37.49 37.49-37.49 98.26 0 135.75l117.19 117.19c18.75 18.74 43.31 28.12 67.87 28.12 24.57 0 49.13-9.37 67.88-28.12l221.57-221.57c12.49-12.5 12.49-32.76 0-45.26zm-116.22 70.97H65.93c1.36-3.84 3.57-7.98 7.43-11.83l13.15-13.15 81.61-81.61 58.61 58.6c12.49 12.49 32.75 12.49 45.24 0 12.49-12.49 12.49-32.75 0-45.24l-58.61-58.6 58.95-58.95 162.45 162.44-48.35 48.34z"></path></svg>

Conclusión

Ahora tiene a tu disposición la biblioteca completa de Font Awesome para personalizar el cursor en sus sitios web 😃
Pero por favor, no te vuelvas loco con eso. Utiliza este nuevo poder con la máxima moderación. Cambiar la apariencia del cursor, especialmente a un icono personalizado, puede confundir a los usuarios. Su icono personalizado siempre debe ser específico para el contexto. En mi caso, lo he cambiado por un cubo cuando el usuario quiere llenar un área en un lienzo.

Recuerde también que los usuarios con pantalla táctil no tendrán esa experiencia. En mi ejemplo de lienzo, tuve que encontrar otra manera de indicar a esos usuarios que la herramienta de cubo fue seleccionada.

Siempre que tenga en cuenta a sus usuarios, puede ser creativo. Por ejemplo, mire el efecto del enlace en este sitio web: http://radiokdug.com/