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 acplish 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?

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 acplish 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?

• javascript
• css
• font-awesome

Share Improve this question Follow edited May 23, 2017 at 12:02 CommunityBot 111 silver badge asked Jul 21, 2015 at 21:08 Anthony HilyardAnthony Hilyard 1,2501212 silver badges2727 bronze badges 7

• What is the input? As in: you want a certain icon, but how is that icon chosen? – FWDekker Commented Jul 21, 2015 at 21:10
• The input is the class name of the desired icon. fa-pencil for example. I will update my question accordingly! – Anthony Hilyard Commented Jul 21, 2015 at 21:12
• I think what @Waflix was asking is if the class name will be dynamic (changeable) and if so, how will the user change it? Will they have a textbox where they type the classname or a dropdown to select it? – GPicazo Commented Jul 21, 2015 at 21:15
• @GPicazo Not necessarily. He provided the info I needed. thinks further – FWDekker Commented Jul 21, 2015 at 21:16
• Users will have a textbox with an acpanied submit button. A FontAwesome icon class name will be entered into the textbox, and when the submit button is pressed, the cursor should change to the matching icon, if valid. – Anthony Hilyard Commented Jul 21, 2015 at 21:18

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 4

Possibly late, but this would allow you to do this: elt.innerHTML = faUnicode('pencil');

Maybe it can help someone else searching for the same thing.

function faUnicode(name) {'use strict';
  // Create a holding element (they tend to use <i>, so let's do that)
  const testI = document.createElement('i');
  // Create a realistic classname
  // - maybe one day it will need both, so let's add them
  testI.className = `fa fa-${name}`;
  // We need to append it to the body for it to have
  //   its pseudo element created
  document.body.appendChild(testI);

  // Get the puted style
  const char = window.getComputedStyle(
    testI, ':before' // Add the ':before' to get the pseudo element
  ).content.replace(/'|"/g, ''); // content wraps things in quotes
                                 //   which we don't want
  // Remove the test element
  testI.remove();

  return char.charCodeAt(0);
}

Or in ECMA5:

function faUnicode(name) {
  var testI = document.createElement('i');
  var char;

  testI.className = 'fa fa-' + name;
  document.body.appendChild(testI);

  char = window.getComputedStyle( testI, ':before' )
           .content.replace(/'|"/g, '');

  testI.remove();

  return char.charCodeAt(0);
}

I have kludged together something that works:

var setCursor = function (icon) {
    var tempElement = document.createElement("i");
    tempElement.className = icon;
    document.body.appendChild(tempElement);
    var character = window.getComputedStyle(
        tempElement, ':before'
    ).getPropertyValue('content');
    tempElement.remove();
    
    var canvas = document.createElement("canvas");
    canvas.width = 24;
    canvas.height = 24;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#000000";
    ctx.font = "24px FontAwesome";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(character, 12, 12);
    var dataURL = canvas.toDataURL('image/png')
    $('body').css('cursor', 'url('+dataURL+'), auto');
}

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!

What you could do is use a hidden div to put the icon in. Once it's in place, read the character inside there, get its value and convert it to a unicode representation. Once you've done that you can use it in the code you gave to display it as a cursor. Note that you'll have to use getComputedStyle() to get the CSS value that applies the icon.

You can do this like so:

HTML

<div style="display:none;"><i id="fontTest"></i></div>

JS

function onSubmit() {
    var userValue = document.getElementById("#someElement").value;
    var fontTest = document.getElementById("#fontTest");
    fontTest.className = fontTest.className + " " + userValue;

    var style = window.getComputedStyle(fontTest);
    var character = String.fromCharCode(style.getPropertyValue("contents"));
    // The character value is now the unicode representation of the icon
}

A version of getting the character that includes a cache so we don't have to keep creating and removing elements for each lookup:

Usage

const unicodeCharacter = getIconUnicode("fas fa-arrow-up");

Function

I put this in a file called utils.js or utils.ts and export the function getIconUnicode() however you can do it any way you like as long as you can call the function.

ES6

const iconUnicodeCache = {};

const getIconUnicode = (iconClass) => {
    if (iconUnicodeCache[iconClass]) return iconUnicodeCache[iconClass];

    const tempElement = document.createElement("i");
    tempElement.className = iconClass;

    document.body.appendChild(tempElement);
    const character = window.getComputedStyle(tempElement, ':before').getPropertyValue('content').replaceAll(`"`, "");
    tempElement.remove();

    if (character) {
        iconUnicodeCache[iconClass] = character;
    }

    return character;
};

TypeScript

const iconUnicodeCache: {[key: string]: string} = {};

const getIconUnicode = (iconClass: string): string => {
    if (iconUnicodeCache[iconClass]) return iconUnicodeCache[iconClass];

    const tempElement = document.createElement("i");
    tempElement.className = iconClass;

    document.body.appendChild(tempElement);
    const character = window.getComputedStyle(tempElement, ':before').getPropertyValue('content').replaceAll(`"`, "");
    tempElement.remove();

    if (character) {
        iconUnicodeCache[iconClass] = character;
    }

    return character;
};