Font einstellen Super Icons als Cursor - ist das möglich?

Question

Font Awesome hat eine sehr gute Sammlung von Icons für Webprojekte. Ich möchte eines dieser Symbole als Cursor verwenden (benutzerdefinierter Cursor).

In meinem Verständnis, Benutzerdefinierte Cursor benötigen eine Bild-URL, aber ich bin nicht in der Lage, die Bild-URLs für Font Awesome Symbole zu finden.

Answer 1

Verstanden!

1. erstellen Leinwand
2. die fa Symbol Malen es
3. Wechsel in eine Base-64 Bild-URL
4. Wenden Sie das Bild auf dem Cursor CSS Stil

Und ich gemacht eine Demo: 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

Am Ende konnte ich nicht ‚T bekommen @ fish_ball Code zuverlässig arbeiten, so dass ich nur downloaded the images, verwenden gimp zuschneiden und bearbeiten Sie sie auf 32 × 32px, und benutzen sie wie folgt aus:

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

Der 1 30 Teil setzt den Mauszeiger‚Hotspot‘1px von links und 30px vom oberen Bildrand.

Answer 3

Es gibt jQuery Awesome Cursor, wo Sie font-awesome Symbole auf Ihren Cursor durch den Aufruf nur einen einfachen Code hinzufügen:

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

oder übergeben Sie einige Optionen:

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

Disclaimer: Ich bin NICHT der Autor dieser Bibliothek Ich habe es gerade gefunden.

Answer 4

Die erwähnte Canvas-Methode führt zu verschwommenen Cursorn.

SVG bietet bessere Ergebnisse:

• die SVG-Download für das Symbol, das Sie von Encharm's Font-Awesome-SVG-PNG verwenden möchten.
• Bearbeiten der SVG einen Texteditor und geben Sie die Breite und Höhe mit Ihnen
  • zB verwenden möchten: 24 x 24
  • Denken Sie daran, es gibt in der Regel eine maximale Größe im Browser (128 x . 128 in Firefox)
• Deklarieren Sie den Cursor in CSS, zB: cursor: url('/assets/img/volume-up.svg'), pointer;