Question

按照this answer中列出的步骤，我将光标设置为FontAwesome图标。现在，我想按类名将光标设置为任何图标（例如，fa-pencil）。为了实现这一点，我似乎需要能够以编程方式查找给定图标的unicode值。

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

这可能吗？

Answer 1

可能很晚，但这可以让你这样做： 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 2

我把一些有用的东西拼凑起来：

var setCursor = function (icon) {
    var tempElement = document.createElement("i");
    tempElement.className = icon;
    document.body.appendChild(tempElement);
    var character = window.getComputedStyle(
        document.querySelector('.' + icon), ':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');
}

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

感谢大家的帮助！

Answer 3

你可以做的是使用一个隐藏的div来放置图标。一旦它到位，读取里面的字符，获取其值并将其转换为unicode表示。完成后，您可以在the code you gave中使用它将其显示为光标。请注意，您必须使用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
}

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

3 个答案: