Question

我在div标签中设置背景，这是表格每行中一个字体很棒的图标。此图标取决于正在显示的对象。我尝试设置类似于Changing CSS content property dynamically的代码。但是，我的数据内容将是一个unicode。我在角度控制器中分配值如下：

if (type) {
    if (type.image.includes('fa-hand-o-up')) {
        type.background = '\f0a6';
    } else if (type.image.includes('fa-wrench')) {
        type.background = '\f0ad';
    } else if (type.image.includes('fa-star')) {
        type.background = '\f005';
    }            
    return type;
}

然后将它们包含在表格中，如下所示：

<td>
    <div class="text-center type-wrapper" 
         data-content="{{::dataItem.type.background}}">
        <span class="bold">{{::dataItem.type.name}}</span>
    </div>
</td>

然而，这只是将0a6,0ad和005作为背景'图像'。有没有办法动态添加unicode内容，还是仅用于纯文本的attr（data-xxx）？

另外，我尝试为颜色添加attr（数据颜色），但这似乎也不起作用。这也是因为我使用十六进制代码而不是纯文本吗？

Answer 1

^{如果我正确地提出了你的问题......}
尝试使用&#x引用前缀

span:before{
  content: attr(data-content);
}

<span data-content="&#x00ff;"></span>

引用以&#开头，以;结尾，x表示使用的是十六进制值。

Answer 2

这对我有用：https://stackoverflow.com/a/26025865/2077405

以这种格式插入，使用\ u在Javascript中表示字符串文字中的Unicode编号
$("a").attr ("data-content", "\u25BC");

动态更改CSS Unicode内容属性

2 个答案: