web-dev-qa-db-fra.com

Définir les icônes Font Awesome comme curseur - est-ce possible?

Font Awesome possède une très bonne collection d'icônes à utiliser dans les projets Web. Je veux utiliser une de ces icônes comme curseur (curseur personnalisé).

À ma connaissance, les curseurs personnalisés ont besoin d'une URL d'image, mais je ne parviens pas à trouver les URL d'images des icônes Font Awesome.

javascriptcsshtml5html5-canvasfont-awesome
31
Pratheeswaran.R

Je l'ai!

  1. Créer une toile
  2. Dessinez l'icône fa dessus
  3. Transformez-le en une URL d'image base-64
  4. Appliquer l'image sur le style CSS du curseur

Et j'ai fait une démo: http://jsfiddle.net/rqq8B/2/

// http://stackoverflow.com/questions/13761472/how-to-render-glyphs-from-fontawesome-on-a-canvas-element
// http://stackoverflow.com/questions/13932291/css-cursor-using-data-uri

$(function() {
    var canvas = document.createElement("canvas");
    canvas.width = 24;
    canvas.height = 24;
    //document.body.appendChild(canvas);
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#000000";
    ctx.font = "24px FontAwesome";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("\uf002", 12, 12);
    var dataURL = canvas.toDataURL('image/png')
    $('body').css('cursor', 'url('+dataURL+'), auto');
});
42
Alfred Huang

Il y a jQuery Awesome Cursor , où vous pouvez ajouter des icônes de police impressionnantes à votre curseur en appelant un seul code simple:

$('body').awesomeCursor('pencil');

Ou en lui passant quelques options:

$('body').awesomeCursor('pencil', {
  /* your options here */
  size: 22,
  color: 'orange',
  flip: 'horizontal'
});

Avertissement: je ne suis PAS l'auteur de cette bibliothèque, je viens de la trouver.

9
Mahdi Alkhatib

En fin de compte, je n'ai pas pu faire fonctionner le code de @ fish_ball de manière fiable, alors j'ai juste téléchargé les images , utilisé gimp pour les recadrer et les éditer à 32 × 32px, et utilisé comme ça:

.myClass { cursor: url('/static/img/pencil30_32x32.png') 1 30, crosshair }

Le 1 30 part définit le pointeur de la souris "hotspot" à 1px de la gauche et 30px du haut de l'image.

6
Michael Scheper

La méthode canvas mentionnée donne des curseurs flous.

L'utilisation de SVG offre de meilleurs résultats:

  • Téléchargez le SVG pour l'icône que vous souhaitez utiliser à partir de Encharm's Font-Awesome-SVG-PNG .
  • Modifiez le SVG à l'aide d'un éditeur de texte et spécifiez la largeur et la hauteur que vous souhaitez utiliser
    • par exemple: 24 x 24.
    • Gardez à l'esprit qu'il y a généralement une taille maximale dans le navigateur (128 x 128 dans Firefox.)
  • Déclarez le curseur en CSS, par exemple: cursor: url( '/assets/img/volume-up.svg' ), pointer;
4
Fabien Snauwaert