如何在 CSS 生成的内容中嵌入 Unicode 补充专用字符？

我正在使用网络字体作为图标。图标字形映射到 Unicode 的补充私人使用区域 A 和 B。

如果我通过 data-* 属性将字符传递到 CSS 中，一切都会正常：

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

进而：

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

但如果我尝试将转义字符直接嵌入 CSS 中......

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

它显示为缺少符号问号。

但如果我尝试不同的特殊角色......

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

效果很好！

我在规范中找不到任何说明这是不可能的...它似乎不起作用。

有人对此有任何见解吗？

访问 Icomoon 将您的图标字体映射到私人使用区域。当你下载字体时，keyamoon已经提供了html，其中有两种显示特殊字符的方法。

方法一（来自 CSS 技巧 http://css-tricks.com/html-for-icon-font-usage/）并包含在 Icomoon 下载中：

<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;
}

方法2来自 爱可梦 http://icomoon.io:

 <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";
}

你可以在 html 中使用任何标签；我同意 CSS-tricks 中的评论之一，即斜体标签在语义上可能是最好的，因为它在 html5 中被重新定义。我只是喜欢 i 图标。