attr串联中的斜线和整数将不会创建图标代码

Question

我正在尝试通过fa图标代码而不使用斜杠：

<div data-icon="f00c"></div>

然后在CSS上像这样在\前面添加斜杠data-icon：

content: '\\' attr(data-icon);

问题是这将打印\f00c，而不打印图标。如果我愿意的话，它当然可以工作：

content: '\f00c';

有什么方法可以实现？

Answer 1

此行为的原因是，css中的stylesheet parser在出现的CSS字符串中检测到反斜杠，并将以下四个字符转换为十六进制值，转换为一个UTF8字符。

通过在属性值之前添加'\'，您只需将反斜杠连接到属性chars。 CSS没有提供在运行时将十六进制值作为字符串（例如attr给出的字符串）转换为char的功能。

没有其他方法，除了在HTML端通过使用例如转义十六进制值来处理它之外。 &#xXXXX;：

content: attr(data-icon);

<div data-icon="&#xf00c;"></div>
<!-- or adding the unicode directly, if it's an utf8 document -->
<div data-icon=""></div>