Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 573
Pratheeswaran.R Avatar asked Jun 07 '14 03:06

Pratheeswaran.R


People also ask

How do I use Font Awesome icon as button?

In order to do this whilst retaining the <input> element, you must put the Font Awesome glyph outside of the <input> and then simply position it on top. Then simply add some CSS to make the whole button clickable.


4 Answers

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');
});
body {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
like image 109
Alfred Huang Avatar answered Oct 18 '22 01:10

Alfred Huang


In the end, I couldn't get @fish_ball's code working reliably, so I just downloaded the images, used gimp to crop and edit them to 32×32px, and used them like this:

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

The 1 30 part sets the mouse pointer 'hotspot' 1px from the left and 30px from the top of the image.

like image 20
Michael Scheper Avatar answered Oct 17 '22 23:10

Michael Scheper


There is jQuery Awesome Cursor, where you can add font-awesome icons to your cursor by calling only one simple code:

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

Or passing it some options:

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

Disclaimer: I am NOT the author of this library I have just found it.

like image 10
Mahdi Alkhatib Avatar answered Oct 18 '22 00:10

Mahdi Alkhatib


The canvas method mentioned results in blurry cursors.

Using SVG offers better results:

  • Download the SVG for the icon you want to use from Encharm's Font-Awesome-SVG-PNG.
  • Edit the SVG using a text editor and specify the width and height you'd like to use
    • e.g.: 24 x 24.
    • Keep in mind there's usually a maximum size in the browser (128 x 128 in Firefox.)
  • Declare the cursor in CSS, e.g.: cursor: url( '/assets/img/volume-up.svg' ), pointer;
like image 8
Fabien Snauwaert Avatar answered Oct 18 '22 01:10

Fabien Snauwaert