Javascript Girl
  1. Javascript Girl
  3. Définir la police Les icônes fantastiques comme curseur – est-ce possible?
Intereting Posts
Téléchargez une photo de la bibliothèque avec un navigateur Web Android Comment réparer le scintillement qui se produit lorsque vous utilisez slideToggle dans jQuery? Capturez la variable globale à partir d'un iframe intégré Convertir BBcode en HTML en utilisant JavaScript / jQuery Créez <div> et ajoutez <div> dynamiquement Impossible d'accéder à la valeur de HTMLCollection Comment savoir si un chemin donné est absolu / relatif et le convertit en absolu pour la manipulation de fichiers? Comment créer une forme d'alphabet contenant du texte avec html css javascript? Appeler un service Web java à partir de la page html et javascript Transition de chemin simple Fancybox 2 Titres et légendes personnalisés [de A (titre) et IMG (alt) Économie automatique immédiate avec brise Détectez quand l'iframe est un domaine interdisciplinaire, puis débrouillez-le Comment puis-je renommer un nœud jsTree Est-il possible d'obtenir du texte collé sans utiliser la fonction setTimeout ()?

Définir la police Les icônes fantastiques comme curseur – est-ce possible?

Font Awesome a une très bonne collection d'icônes à utiliser dans les projets web. Je veux utiliser une de ces icônes en tant que curseur (curseur personnalisé).

Selon moi, les Cursors personnalisés ont besoin d'une URL d'image, mais je ne parviens pas à trouver les URL de l'image pour les icônes Font Awesome.

Je l'ai!

  1. Créer un canevas
  2. Dessine l'icône fa sur elle
  3. Changez-le dans une URL d'image base-64
  4. Appliquer l'image sur le curseur du style css

Et j'ai fait une démonstration: 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'); });

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

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

Ou en passant quelques options: 

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

Disclaimer: Je ne suis pas l'auteur de cette bibliothèque que je viens de trouver.

En fin de compte, je ne pouvais pas obtenir le code de @ fish_ball fonctionnant de façon fiable, alors je viens de télécharger les images , j'ai utilisé le gimp pour les récolter et les éditer à 32 × 32px, et je les utilisais comme ceci: 

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

La partie 1 30 définit le pointeur de la souris 'hotspot' 1px à partir de la gauche et 30px du haut de l'image.

La méthode de la toile mentionnée résulte en 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 dans 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 habituellement une taille maximale dans le navigateur (128 x 128 dans Firefox).
  • Déclarez le curseur dans CSS, par exemple: cursor: url( '/assets/img/volume-up.svg' ), pointer;