将图标添加到伪元素

Question

我正在尝试通过JavaScript向我的导航(动态更改)添加图标.

这是我的代码(或JSFiddle):

var icon = document.querySelector('#icon');
icon.setAttribute('data-icon', '†');

#icon:after {
  content: attr(data-icon);
}

<div id="icon" data-icon="">
  Icon
</div>

但它不起作用,为什么？尝试data-icon手动编辑属性时,会出现图标.否则只是图标的unicode.

Answer 1

HTML实体在CSS中没有任何意义.如果您想要遵循该路径,则需要先解码它:

var icon = document.querySelector('#icon');
var tmp = document.createElement("span");
tmp.innerHTML = '†';
icon.setAttribute('data-icon', tmp.innerText);

#icon:after {
  content: attr(data-icon);
}

<div id="icon" data-icon="">
  Icon
</div>

...或者,只需按原样键入字符(只要您的应用程序是用UTF-8编写的):

var icon = document.querySelector('#icon');
icon.setAttribute('data-icon', '†');

#icon:after {
  content: attr(data-icon);
}

<div id="icon" data-icon="">
  Icon
</div>

最后但并非最不重要的是,CSS也接受转义序列,但您需要使用适当的语法.但是,这种方法似乎不适用于您的特定角色:

var icon = document.querySelector('#icon');
// Brackets added for visibility, not part of the syntax
icon.setAttribute('data-icon', '(\u0086)(\u2020)');

#icon:after {
  content: attr(data-icon);
}

<div id="icon" data-icon="">
  Icon
</div>

我认为这与U + 2020'DAGGER'(工作正常)是一个常规字符的事实有关,但你正在使用U + 0086'START OF SELECTED AREA'(未显示)是一个控制字符.正如您在后续评论中提到的那样,您正在使用FontAwesome,并且此类库提供将某些代码点映射到显示图标的自定义字体(尽管它们通常使用私有区域来避免冲突).