Programmatically get FontAwesome unicode value by name

Question

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?

What is the input? As in: you want a certain icon, but how is that icon chosen? — FWDekker, Jul 21 '15 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, Jul 21 '15 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, Jul 21 '15 at 21:15
@GPicazo Not necessarily. He provided the info I needed. *thinks further* — FWDekker, Jul 21 '15 at 21:16
Users will have a textbox with an accompanied 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, Jul 21 '15 at 21:18
Parsing the file once and exporting the values into an array manually seems like the best way to do it, otherwise it'd involve hacks and tricks to somehow read the `content` of a `::before` pseudo-element, so it's more trouble than it's worth and may not even be supported by most browsers. — SeinopSys, Jul 21 '15 at 21:19
It might be easier to fake it by making an element that contains the icon follow the mouse cursor and turn the actual cursor invisible. — JJJ, Jul 21 '15 at 21:21

score 4 · Answer 1 · answered Jan 26 '16 at 04:40

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 computed 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);
}

score 3 · Accepted Answer · edited Nov 16 '21 at 11:22

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!

score 1 · Answer 3 · edited May 23 '17 at 10:30

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
}

The problem is that the element will be empty; the Font Awesome icons are implemented purely by CSS. — JJJ, Jul 21 '15 at 21:27
This is not working for me. I believe it has to do with the `before` pseudo-element that FontAwesome uses. — Anthony Hilyard, Jul 21 '15 at 21:48

score 0 · Answer 4 · answered Nov 16 '21 at 11:40

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;
};

Programmatically get FontAwesome unicode value by name

4 Answers4

Linked