将图标添加到伪元素

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。

- venkatraj

---

可能是将Unicode字符插入JavaScript的重复问题。 - Paolo Forgia

Answer 1

在CSS中，HTML实体并没有任何意义。如果您想要这样做，您需要先解码它：

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等库提供的自定义字体将某些代码点映射到显示图标（尽管它们通常使用私有区域来避免冲突）。

- Álvaro González

---

谢谢Alvaro！问题已解决。你回答中最受欢迎的部分是答案本身将实体转换为Unicode。FYI：它来自FontAwesome。 - venkatraj

@venkatraj，我最终弄清楚了为什么我在使用U+0086时遇到问题。我已经更新了我的答案。 - Álvaro González

Answer 2

显然是因为setAttribute转义了您的特殊字符...而且您需要使用CSS编码的图标，而不是HTML实体。请使用此转换器： † → \0086 我建议使用有意义的名称，而不是在属性中硬编码写入图标代码。

例如：

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

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

最好所有的图标元素都具有一个共享类，并共享属性。

- vsync

---

感谢提供转换器链接。 - venkatraj

Answer 3

编码领域

更多详细信息请参见此StackOverflow答案。

答案已更新（请参见评论和编辑）。

简而言之，我建议使用字符而不是任何一种编码方法。在这种情况下，您的HTML文件必须正确编码，并且正确地告知浏览器编码方式。

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

.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;
}

<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>

- Fred Gandt

---

这应该可以解释：将Unicode字符插入JavaScript。 - AlexG

我运行了代码片段，但在“图标”文本后没有显示任何图标，只是空白。这是预期的行为吗？ - shaochuancs

@shaochuancs - 你在哪个浏览器中看不到图标？我正在使用谷歌的Chrome浏览器，一切都正常。 - Fred Gandt

还在Firefox、Safari和Opera上进行了测试，但是没有成功 :( 看起来更像是Mac的问题... - shaochuancs

@shaochuancs - 我不确定为什么这对你不起作用，而且对我来说，需要调试问题的时间再也不能更糟糕了。我将尝试在几个小时内解决它，但现在必须注销。抱歉。我会回来的。也许在我离开时有其他人可以帮助你。 - Fred Gandt