使用 jQuery 获取 Font Awesome 图标值？答案

【问题标题】：Get Font Awesome icon value using jQuery?使用 jQuery 获取 Font Awesome 图标值？
【发布时间】：2013-08-05 13:01:28
【问题描述】：

我在我的一个网络应用程序中使用了很棒的字体。我想用一个很棒的字体类来获取一个元素的值，然后用它做更多的动作。这可能吗？

例如，这里是一个可点击的可能选择的网格：

“图标”使用以下 HTML 定义：

<span class="icon icon-caret-down pointer-img"></span>

还有以下 CSS：

.icon-caret-down:before     {content:"\f0d7";}

问题在于该值是使用 CSS 设置的。对于这种场景，jquery 选择器会是什么？

$(".pointer-img").click(function(){
   console.log( $(this) );
});

提前致谢。

【问题讨论】：

它只会记录有问题的 span 元素。无法使用 jQuery 选择伪元素

标签： jquery html css fonts font-awesome

【解决方案1】：

最近发现了一个好用的sn-p，还没试过：

var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

或更多jQuery-crossbrowser-flavory：

var content = window.getComputedStyle(
    $('.element').get(0), ':before'
).getPropertyValue('content');

它似乎工作......不知何故： Fiddle

【讨论】：

成功了！这绝对是一个绝妙的答案！非常感谢你，伙计：D
请注意，可能（并且将会）潜伏一些跨浏览器问题。这似乎在 IE8 中不起作用。
是的，我现在已经在几个不同的浏览器中对其进行了测试。只要它在 chrome 中工作，我就很高兴！
@Nirazul 我可以在使用 fontawesome 时获取内容。请看这里jsfiddle.net/91vg7vtt。告诉我出了什么问题。

【解决方案2】：

这是解决方案，以防万一有人需要它（感谢 Nirazul！）

$(".pointer-img").click(function(){
   var content = window.getComputedStyle(
      $($(this)).get(0), ':before'
   ).getPropertyValue('content');
   console.log(content)
});

【讨论】：