以编程方式获得FontAwesome unicode值

Question

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

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

这可能吗？

Answer 1

我已经kludged在一起，一些作品：

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 2

你可以做的是使用一个隐藏的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 
} 

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