javascript - 给伪元素添加图标

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 也接受转义序列，但您需要使用 appropriate syntax .但是，这种方法似乎不适用于您的特定 Angular 色:

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' 这一事实有关(效果很好)是一个 regular character但是你用的那个U+0086 'START OF SELECTED AREA' (未显示)是 control character .正如您在后续评论中提到的，您正在使用 FontAwesome，此类库提供自定义字体，将某些代码点映射到显示图标(尽管它们通常使用 private areas 来避免冲突)。