Pratheeswaran.R Pratheeswaran.R - 5 months ago 14
Javascript Question

Set Font Awesome icons as cursor - is this possible?

Font Awesome has a very good collection of icons to be used in web projects. I want to use one of those icons as cursor (custom cursor).

In my understanding, Custom Cursors need an image url, but I am unable to find the image urls for Font Awesome icons.

Answer

Got it!

  1. Create a canvas
  2. Draw the fa icon on it
  3. Change it into a base-64 image url
  4. Apply the image on the cursor css style

And I made a 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');
});