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

问题描述：

按照此答案中所述的步骤，我将光标设置为FontAwesome图标。现在，我想将光标设置为任何图标，按类名（例如， fa-pencil ）。
要完成这一点，看起来我需要能够以编程方式查找给定图标的unicode值。

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.

我知道这些值列在 font-awesome.css 样式表中，但我想避免

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.

这是否可能？

答

我已经聚集在一起工作的东西：

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(
        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 伪元素的内容。

This creates a temporary element with the given class, then uses window.getComputedStyle to grab the content of the :before pseudo-element.

感谢大家的帮助！

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

相关推荐