Changer le curseur par un icone Fontastic – javaScript

La police de caractères Font Awesome est une police d’icones vectoriels svg. Elle est composée de nombreux icones que l’on affiche à l’aide d’une classe. Par exemple  <i class="fa fa-motorcycle"></i>  affiche une moto.

Fontastic est un générateur de police d’icones svg, que l’on peuple uniquement avec les icones dont on a besoin. On peut choisir des icones Font Awesome, et d’autres issus de polices supplémentaires.

L’objectif est de changer l’aspect du curseur de la souris au-dessus d’un élément. La propriété CSS cursor permet de faire cela.

Changer l'aspect du curseur avec une police Fontastic.
Changer l’aspect du curseur.

Le curseur de l’image n’illustre pas le propos. Ce n’est qu’une image png obtenue sur le site flaticon.com. On peut y obtenir les fichiers photoshop psd des icones Font Awesome, il suffit alors de modifier le tracé de l’icone et d’ajouter un contour blanc. On obtient alors le curseur avec la propriété css : monImage { cursor: url("monImage.png"), auto } .

Pour obtenir un icone Fontastic, on crée un canvas que l’on remplit avec notre police, à qui l’on donne une pseudo-url de type image/png.

L’icone utilisé est un check, à qui l’on a assigné la lettre a.

Le plugin Font Awesome Cursor fait la même chose (avec Font Awesome et la librairie jQuery).

Et hop, on peut changer l’aspect du curseur avec une police personnalisée Fontastic.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *