以編程方式獲得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); 
}