Css displaying Icons with fonts and data attributes from jquery

Question

I am trying to set font from jquery with the data attribute and for some reason the icon is not displaying and i see the actual text.

.someClass {
    position: relative;
    white-space: nowrap;
    display: inline-block;
    cursor: pointer;
    &::before, span::before {
        font-family: FontAwesome;
        text-shadow: .05em .05em #aaa;
        content: attr(data-content);
        color: #AAA;
        font-size: rem-calc(20px);
        line-height: 1;
        letter-spacing: 4px;
    }
}

 $('.someClass').attr('data-content','\f005');

And when i do this without jquery like this, it is working:

   content: "\f005";

Answer 1

Backslash characters have special meaning.

try:

$('.someClass').attr('data-content','\\f005');

(two backslashes)

Answer 2

You can try

 $('.someClass').css('content','\f005');

instead off

 $('.someClass').attr('data-content','\f005');