40

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.

Alfred Huang
  • 17,654
  • 32
  • 118
  • 189
Pratheeswaran.R
  • 894
  • 1
  • 10
  • 22
  • I don't think you can specify text/font for the cursor. You may need to create an image with the icon that you want from Font Awesome, and then use it for the cursor with `cursor: url(...)` – Alvaro Montoro Jun 07 '14 at 03:12
  • I think I can di it, first create a canvas, then draw the fa icon on it, then change it into a base-64 image, then reference it. I'm trying to code it, wait for me! – Alfred Huang Jun 07 '14 at 03:26
  • It would be nice to see some of your existing code. – Ali Gajani Jun 07 '14 at 03:34
  • @fish_ball that sounds like a lot of effort just to avoid creating an image beforehand. Although it sounds like an interesting challenge, now I want to try too – Alvaro Montoro Jun 07 '14 at 03:40
  • @Monty82, @ fish_ball : Thank you for the suggestions. will create the image beforehand and use it for cursor. Thanks. – Pratheeswaran.R Jun 07 '14 at 03:45
  • 2
    quite related jQuery plugin: https://jwarby.github.io/jquery-awesome-cursor/ – cregox May 08 '15 at 17:53

5 Answers5

46

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>
Rene
  • 976
  • 1
  • 13
  • 25
Alfred Huang
  • 17,654
  • 32
  • 118
  • 189
  • In the JSfiddle, I'm seeing the custom element frame / placeholder, but not an actual element. How are you loading the fontawesome elements? Am I doing this right? Do I have to add in the CDN link for the fontawesome library? – zipzit Jun 19 '14 at 19:44
  • "\uf002" in FontAwesome represents a placeholder like character, change that - say "\uf001" - you should see a different cursor. – Pratheeswaran.R Jun 20 '14 at 06:13
  • I understand. I now see the font-awesome.css in the external resources on the left hand margin. What I'm not seeing are results in the JSFiddle. I see an empty box for a cursor.. Ooops. Update. Works fine on Chrome browser, just not on Firefox (win7). Ugh. I hate when things work fine in one browser, but not in another. – zipzit Jun 20 '14 at 07:35
  • Doens't work in my chrome either. I just see "FL" as my cursor – Konstantin Krass Aug 22 '14 at 12:49
  • I'm trying to use fa-crosshairs with crosshair arg instead of auto but still couldn't get it to draw in the center of the icon. :( – qmo Nov 07 '14 at 17:27
  • For those seeing "FL", looks like you need to force the font to load by adding a font tag in the HTML code. http://jsfiddle.net/rna9qv6m/ – Michael Gorham Oct 31 '15 at 18:11
  • This does not work in Internet Explorer or Edge in windows 10. Works in Firefox though – Ejaz Apr 07 '16 at 04:43
  • Doesn't work in IE11 as well. @olragon your link is unreachable too. – yeppe Oct 31 '18 at 11:33
15

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.

cregox
  • 17,674
  • 15
  • 85
  • 116
Michael Scheper
  • 6,514
  • 7
  • 63
  • 76
  • 3
    To whomever downvoted my answer: It would be helpful if you followed the instructions and left a comment saying why. If you have a better answer, it would help everybody if you posted it. @fish_ball's code only works in some browsers, though, even with the tag. – Michael Scheper Jan 15 '16 at 02:42
  • 2
    More downvotes, and still no explanations! Apparently a lot of people don't understand how a community can work together to help everybody. – Michael Scheper Dec 12 '18 at 05:51
10

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.

Mahdi Alkhatib
  • 1,954
  • 1
  • 29
  • 43
  • 1
    I will add that this library also works with other icon fonts (ex. icomoon) – plong0 Mar 19 '17 at 23:40
  • 1
    I spent about a day of R&D trying out the solutions that are supposed to force pre-loading the font, and nothing worked except for the [jquery-awesome-cursor library](https://jwarby.github.io/jquery-awesome-cursor/) – plong0 Mar 19 '17 at 23:42
  • nice lib, but how the heck unset custom cursor?? (docs have nothing about this) – okliv Oct 30 '22 at 21:26
8

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;
Fabien Snauwaert
  • 4,995
  • 5
  • 52
  • 70
  • I wanted to highlight that the resizing step is required! – bakerhumadi Jul 21 '17 at 20:46
  • SVG is better than canvas for a number of reasons.. SVG is more deterministic, whereas canvas you have to ask, "was this drawn?", "If I resized it, was it re-drawn?" – dansch Jan 17 '18 at 00:26
0

For anyone using Vue.js, there is an easier approach:

Importing font awesome icon as a component:

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(fas);
library.add(fab);
library.add(far);
Vue.component('fa-icon', FontAwesomeIcon);

and using it directly in the HTML of a page:

<fa-icon icon="copy" @click="yourFunction"/>

and surrounding your tag with <span>:

<span class="hover"><fa-icon icon="copy" @click="yourFunction"/></span>

and adding to your css:

span.hover { 
  cursor: pointer; 
}

This will add a pointer on all <span> tags with class hover in your code (and thus your font awesome icons !)

marcvander
  • 479
  • 4
  • 17
  • Is there a way we can have a small tooltip sort of text appear when someone hovers over the font-awesome icon with custom text? – John Doe Sep 27 '20 at 03:18
  • Bootstrap can help you do that easily: https://bootstrap-vue.org/docs/components/tooltip – marcvander Sep 27 '20 at 08:25
  • 1
    @marcvander, I thought the original question was to make the cursor of mouse to be a custom icon from Font Awesome. If I understood correctly, your solution would show the browser's built-in "pointer" cursor (not custom cursor) when the user hovers the mouse over the "copy" icon? – hyong Feb 01 '23 at 02:29
  • @hyong Yes indeed, my code does that. Then I might have misunderstood the original question – marcvander Feb 02 '23 at 15:46