Imposta carattere Icone fantastiche come cursore - è possibile?

Question

Font Awesome ha una buona raccolta di icone da utilizzare nei progetti web. Voglio usare una di quelle icone come cursore (cursore personalizzato).

A mio parere, i cursori personalizzati richiedono un URL immagine, ma non riesco a trovare gli URL immagine per le icone Font Awesome.

Answer 1

Trovato!

1. Creare una tela
2. Disegnare l'icona fa su di esso
3. trasformarla in una base-64 immagine url
4. Applicare l'immagine sullo stile css del cursore

E ho fatto una dimostrazione: 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'); 
}); 

Answer 2

Alla fine, non potevo 'T ottenere @ codice di fish_ball funzionare in modo affidabile, quindi ho solo downloaded the images, utilizzato gimp ritagliare e modificarli a 32 × 32px, e li usavano come questo:

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

La parte 1 30 imposta il puntatore del mouse 'hotspot' 1px da sinistra e 30px dalla parte superiore dell'immagine.

Answer 3

C'è jQuery Awesome Cursor, in cui è possibile aggiungere le icone dei font-impressionante per il cursore chiamando un solo codice semplice:

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

o passarla alcune opzioni:

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

Disclaimer: Io sono NON l'autore di questa libreria l'ho appena trovato.

Answer 4

Il metodo canvas menzionato risulta in cursori sfocati.

Utilizzando SVG offre risultati migliori:

• Scarica lo SVG per l'icona che si desidera utilizzare da Encharm's Font-Awesome-SVG-PNG.
• Modificare lo SVG usando un editor di testo e specificare la larghezza e l'altezza si desidera utilizzare
  • ad esempio: 24 x 24.
  • Tenete a mente di solito c'è una dimensione massima nel browser (128 x . 128 in Firefox)
• Dichiarare il cursore in CSS, ad esempio: cursor: url('/assets/img/volume-up.svg'), pointer;