font awesome: retrieve css of pseudo element displays a small rectangle

Question

I am trying to retrieve the CSS value of font awesome pseudo element. This is the css:

.pe-icon--check:before {
    content: '\f00c';
}

I use this query

var symb = window.getComputedStyle($('.pe-icon--check').get(0), ':before').getPropertyValue('content');

But the result I get is a small rectangle . The value I need is \f00c. Could someone please help me fix this?

Have you included the font properly and followed the correct folder set up? Are you using it locally? it has to be exact or it fails, like you're seeing — StudioTime, Jan 21 '16 at 08:03
@DarrenSweeney - The icon loads properly on the page and there are no errors, it is able to identify the icon. To retrieve the css 'content' is where I face the issue. I want \f00c and not the small rectangle. — Eajaz, Jan 21 '16 at 16:45

score 1 · Accepted Answer · answered Jan 21 '16 at 20:56

The below solution worked!!

var content = window.getComputedStyle(document.querySelector('.pe-icon--check'),':before').getPropertyValue('content');

function entityForSymbolInContainer(character) {
    var code = character.replace(/"/g, '').charCodeAt(0);
    var codeHex = code.toString(16).toUpperCase();
    while (codeHex.length < 4) {
        codeHex = "0" + codeHex;
    }
    return "\\" + codeHex + ";";
}

font awesome: retrieve css of pseudo element displays a small rectangle

1 Answers1