按照此答案中所述的步骤,我将光标设置为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值
发布评论