将图标添加到伪元素

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。但是，这种方法似乎不适用于您的特定角色：

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'（未显示）是{ {3}}。正如您在后续评论中提到的那样，您正在使用FontAwesome，此类库提供自定义字体，将某些代码点映射到显示图标（尽管它们通常使用control character来避免冲突）。

Answer 2

这显然是因为setAttribute正在逃避你的特殊角色......无论如何你需要使用CSS编码的图标而不是HTML实体。使用this convertor：

†→\0086

我建议使用有意义的名称而不是硬编码将图标的代码写入属性。

例如：

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

[data-icon=icon-heart]{
    content:'\2764';
}

（最好所有的图标元素都有一个共享属性的共享类）

Answer 3

编码雷区

有关详细信息，请参阅this StackOverflow answer。

已更新答案（请参阅评论和edits）。

简而言之，我建议使用该字符而不是任何编码方法。在这种情况下，您的HTML文件被正确编码并且它们正确地告知浏览器编码是什么是至关重要的。

＆＃13;

＆＃13;

var js = document.querySelectorAll( ".js" );
js[ 0 ].setAttribute( "data-icon", "\u0086" );
js[ 1 ].setAttribute( "data-icon", "†" );

＆＃13;

.css:after {
    content: "\86";
    color: red;
}
.css.char:after {
    content: "†";
    color: blue;
}
.data:after {
    content: attr( data-icon );
}
.js:after {
    content: attr( data-icon );
}
.red:after {
    color: red;
}
.blue:after {
    color: blue;
}

＆＃13;

<div class="css">hard coded css content</div>
<div class="css char">hard coded css content char</div>
<br>
<div class="data red" data-icon="&#x086;">hard coded data-icon</div>
<div class="data blue" data-icon="†">hard coded data-icon char</div>
<br>
<div class="js red">data-icon by js</div>
<div class="js blue">data-icon by js char</div>

＆＃13;

＆＃13;

＆＃13;