Following the steps outlined in this answer, I am setting my cursor to a FontAwesome icon. Now, I would like to set the cursor to any icon, by class name (for example, fa-pencil
).
To accomplish this, it seems like I would need to be able to programmatically lookup the unicode value of a given icon.
I know that these values are listed in the font-awesome.css
stylesheet, but I would like to avoid parsing that file, if another method exists.
Is this possible?
Advertisement
Answer
I have kludged together something that works:
JavaScript
x
22
22
1
var setCursor = function (icon) {
2
var tempElement = document.createElement("i");
3
tempElement.className = icon;
4
document.body.appendChild(tempElement);
5
var character = window.getComputedStyle(
6
tempElement, ':before'
7
).getPropertyValue('content');
8
tempElement.remove();
9
10
var canvas = document.createElement("canvas");
11
canvas.width = 24;
12
canvas.height = 24;
13
var ctx = canvas.getContext("2d");
14
ctx.fillStyle = "#000000";
15
ctx.font = "24px FontAwesome";
16
ctx.textAlign = "center";
17
ctx.textBaseline = "middle";
18
ctx.fillText(character, 12, 12);
19
var dataURL = canvas.toDataURL('image/png')
20
$('body').css('cursor', 'url('+dataURL+'), auto');
21
}
22
This creates a temporary element with the given class, then uses window.getComputedStyle
to grab the content of the :before
pseudo-element.
Thank you everyone for all your help!