使用attr(data-icon)属性在元素之前显示unicode

Question

让我们演示一个简单的HTML代码示例,如下所示:

<div data-icon="\25B6">Title</div>

我希望这个元素有一个由它的数据属性(data-icon)设置的前缀图标,所以我设置了这样的CSS文件:

div:before {
    content: attr(data-icon);
}

我希望这个例子的输出看起来像这样:

?Title

所有我能得到的不是所需的输出,而是:

\25B6Title

所以我的问题是:我做错了什么/我错过了什么？

JSFiddle示例:http://jsfiddle.net/Lqgr9zv6/

Answer 1

CSS转义序列仅适用于CSS字符串.当您从HTML属性(即CSS外部)获取CSS转义序列时,它将按字面读取,而不是解释为CSS字符串的一部分.

如果要在HTML属性中对字符进行编码,则需要将其编码为HTML实体.这将被CSS视为相应的Unicode字符.由于这是十六进制转义序列,因此您可以像这样进行音译:

<div data-icon="&#x25B6;">Title</div>

或者,您可以只使用Unicode字符本身:

<div data-icon="?">Title</div>

[次要补充]

如果属性的值必须使用Unicode符号反应在Vue公司或任何现在流行的JavaScript框架.

<div :data-icon="'\u25b6'">Title</div>