Définir la Police Impressionnant icônes de curseur - est-ce possible?

Police Impressionnant a une très bonne collection d'icônes pour être utilisé dans des projets web. Je veux utiliser l'un de ces icônes que cursor (curseur personnalisé).

Dans ma compréhension, Curseurs Personnalisés besoin d'une url de l'image, mais je suis incapable de trouver l'url de l'image pour la Police Impressionnant icônes.

Je ne pense pas que vous pouvez spécifier le texte/police pour le curseur. Vous devrez peut-être créer une image avec l'icône que vous voulez de Police Génial, et ensuite l'utiliser pour le curseur avec cursor: url(...)
Je pense que je peux di, créez d'abord une toile, puis dessiner la fa icône sur elle, puis le transformer en base-64 image, puis de référence. Je suis en train de coder, attendez-moi!
Il serait agréable de voir une partie de votre code existant.
cela ressemble à beaucoup d'effort juste pour éviter la création d'une image à l'avance. Bien que cela sonne comme un défi intéressant, maintenant je veux essayer de trop
fish_ball : Merci pour les suggestions. va créer l'image à l'avance et de les utiliser pour la position du curseur. Merci.
très liés plugin jQuery: jwarby.github.io/jquery-génial-de curseur

InformationsquelleAutor Pratheeswaran.R | 2014-06-07

43

Obtenu!
1. Créer une toile
2. Dessiner la fa icône sur elle
3. Changer en base-64 url de l'image
4. Appliquer l'image sur le curseur de style css
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');
});
```
- Dans le JSfiddle, je vais voir l'élément personnalisé image / espace réservé, mais n'est pas une véritable élément. Comment êtes-vous de charger le fontawesome éléments? Suis-je à faire de ce droit? Dois-je ajouter dans le CDN lien pour le fontawesome bibliothèque?
- "\uf002" dans FontAwesome représente un espace réservé comme le personnage, changement - dire "\uf001" - vous devriez voir un curseur différent.
- Je comprends. Je vois maintenant le font-awesome.css dans les ressources externes sur la marge de gauche. Ce que je ne suis pas de voir des résultats dans le JSFiddle. Je vois une case vide pour un curseur.. Oups. La mise à jour. Fonctionne très bien sur le navigateur google Chrome, mais pas sur Firefox (win7). Ugh. Je déteste quand les choses fonctionnent bien dans un navigateur, mais pas dans un autre.
- Doens pas de travail dans mon chrome soit. Je viens de voir "FL" comme mon curseur
- Je suis en train d'utiliser fa-réticule avec réticule arg au lieu de l'auto, mais ne pouvait toujours pas à tirer dans le centre de l'icône. 🙁
- Pour celui qui voit "FL", on dirait que vous avez besoin de force de la police en charge par l'ajout d'une police de caractères de la balise dans le code HTML. jsfiddle.net/rna9qv6m
- Cela ne fonctionne pas dans Internet Explorer ou de Pointe dans windows 10. Fonctionne dans Firefox si
- Ne fonctionne pas dans IE11 ainsi. @olragon votre lien est inaccessible aussi.
InformationsquelleAutor Alfred Huang
10

Il est jQuery Curseur Génial, où vous pouvez ajouter de la police impressionnant icônes de votre curseur en appelant seulement un simple code:
```
$('body').awesomeCursor('pencil');
```
Ou de le transmettre certaines options:
```
$('body').awesomeCursor('pencil', {
  /* your options here */
  size: 22,
  color: 'orange',
  flip: 'horizontal'
});
```
Avertissement: je ne suis PAS l'auteur de cette bibliothèque que j'ai trouvé.
- J'ajouterai que cette bibliothèque fonctionne également avec d'autres icône polices de caractères (ex. icomoon)
- J'ai passé un jour de R&D essayer les solutions qui sont censés la force de pré-chargement de la police, et rien n'a fonctionné, sauf pour le jquery-génial-bibliothèque de curseur
InformationsquelleAutor Mahdi Alkhatib
7

À la fin, je ne pouvais pas obtenir @fish_ball code du travail de manière fiable, donc je viens de télécharger les images, utilisé gimp de recadrer et de les modifier à 32×32 px, et de les utiliser comme ceci:
```
.myClass { cursor: url('/static/img/pencil30_32x32.png') 1 30, crosshair }
```
La 1 30 partie définit le pointeur de la souris 'hotspot' 1px de la gauche et 30px à partir du haut de l'image.
- À qui downvoted ma réponse: Il serait utile si vous avez suivi les instructions et laissé un commentaire en disant pourquoi. Si vous avez une meilleure solution, ce serait d'aider tout le monde si vous l'avez posté. @fish_ball code ne fonctionne que dans certains navigateurs, bien que, même avec la <font> tag.
- Plus downvotes, et toujours pas d'explications! Apparemment beaucoup de gens ne comprennent pas comment une communauté peuvent travailler ensemble pour aider tout le monde.
InformationsquelleAutor Michael Scheper
5

La toile méthode mentionnée résultats brouille les curseurs.

En utilisant SVG offre de meilleurs résultats:
- Télécharger le SVG pour l'icône que vous souhaitez utiliser à partir de Encharm de Font-Awesome-SVG PNG.
- Modifier le format SVG à l'aide d'un éditeur de texte et de spécifier la largeur et la hauteur que vous souhaitez utiliser
  - par exemple: 24 x 24.
  - Gardez à l'esprit il ya habituellement une taille maximale dans le navigateur (128 x 128 dans Firefox.)
- Déclarer le curseur dans le CSS, par exemple: cursor: url( '/assets/img/volume-up.svg' ), pointer;
- Je voulais souligner le fait que le redimensionnement de l'étape est nécessaire!
- SVG est mieux que la toile pour un certain nombre de raisons.. SVG est plus déterministe, alors que la toile vous devez vous demander, "s'agissait-il en tirer?", "Si j'ai redimensionné il, a été re-dessiné?"
InformationsquelleAutor Fabien Snauwaert

Vous devez vous connecter pour publier un commentaire.