以编程方式按名称获取 FontAwesome unicode 值

Question

按照 this answer 中概述的步骤，我将光标设置为 FontAwesome 图标。现在，我想通过 class 名称（例如，fa-pencil）将光标设置为任何图标。为此，我似乎需要能够以编程方式查找给定图标的 unicode 值。

我知道这些值列在 font-awesome.css 样式表中，但如果存在其他方法，我想避免解析该文件。

这可能吗？

Answer 1

你可以做的是使用隐藏的 div 来放置图标。放置到位后，读取其中的字符，获取其值并将其转换为 unicode 表示形式。完成后，您可以在 the code you gave to display it as a cursor. Note that you'll have to use getComputedStyle() 中使用它来获取应用图标的 CSS 值。

你可以这样做：

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
}

Answer 2

我拼凑了一些有用的东西：

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

这会使用给定的 class 创建一个临时元素，然后使用 window.getComputedStyle 获取 :before 伪元素的内容。

谢谢大家的帮助！

Answer 3

可能晚了，但这可以让你这样做： elt.innerHTML = faUnicode('pencil');

也许它可以帮助其他人搜索相同的东西。

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

或者在 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);
}

Answer 4

获取包含缓存的字符的版本，因此我们不必为每次查找继续创建和删除元素：

用法

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

函数

我把它放在一个名为 utils.js 或 utils.ts 的文件中并导出函数 getIconUnicode() 但是你可以用任何你喜欢的方式来做，只要你能调用这个函数。

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

以编程方式按名称获取 FontAwesome unicode 值

Programmatically get FontAwesome unicode value by name

javascript

css

font-awesome