Notice: wp_add_privacy_policy_content est appelée de la mauvaise manière. The suggested privacy policy content should be added only in wp-admin by using the admin_init (or later) action. Veuillez lire Débogage dans WordPress (en) pour plus d’informations. (Ce message a été ajouté à la version 4.9.7.) in /home/xavierbs/www/_blog/wp-includes/functions.php on line 4161
Changer le curseur par un icone Fontastic - javaScript

Changer le curseur par un icone Fontastic – javaScript

Notez que cet article a été écrit pour la première fois il y a plus de 2 ans, mais n'est pas nécessairement obsolète.

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 *