How to embed Unicode Supplementary Private Use cha

I'm using a webfont for icons. The icon glyphs are mapped to Unicode's Supplementary Private Use Area-A & B.

Everything works fine if I pass characters into CSS via data-* attributes:

<div class="icon" data-icon="&#xF005A;"></div>

And then:

.icon::before {
    font-family: IconFont;
    content: attr(data-icon)
}

But if I try to embed the escaped character directly in CSS...

.icon::before {
    font-family: IconFont;
    content: '\0F005A ';
}

It shows up as a missing symbol question mark.

But if I try a different special character...

.icon::before {
    font-family: IconFont;
    content: '\F8FF ';
}

It works fine!

I can't find anything in the spec that says this isn't possible... It just doesn't seem to work.

Anybody have any insight into this?

Visit Icomoon to map your icon font to Private Use Area. When you download the font, keyamoon has provided html, which has two methods for displaying the special characters.

Method 1 (from CSS-tricks) and included in Icomoon download:

<i aria-hidden="true" data-icon="&#xe000;"></i>

 ......

[data-icon]:before {
    font-family: 'icomoon';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

Method 2 from Icomoon:

 <span aria-hidden="true" class="icon-pencil"></span>

 ......

.icon-pencil, .icon-folder {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-pencil:before {
    content: "\e000";
}
.icon-folder:before {
    content: "\e001";
}

You can use any tag for the html really; I agree with one of the comments in CSS-tricks that the italic tag may be best semantically, since it was redefined in html5. I just like i for icon.