Get Font Awesome icon value using jQuery?

css, font-awesome, fonts, html, jquery

Solution

I found a useful snippet recently, but haven't tried it yet:

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

Or more jQuery-crossbrowser-flavoury:

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

It seems to work... somehow: Fiddle

Problem

I'm using font awesome in one of my web apps. I want to get the value of an element with a font awesome class and then do more actions with it. Is this possible? As an example, here is a clickable grid of possible selections: The 'icon' is defined with the following HTML: ``` <span class="icon icon-caret-down pointer-img"></span> ``` And the following CSS: ``` .icon-caret-down:before {content:"\f0d7";} ``` The problem is that the value is set using CSS. What would the jquery selector be for this type of scenario? ``` $(".pointer-img").click(function(){ console.log( $(this) ); }); ``` Thanks in advance.

Original source