向伪元素添加图标

Posted 2023-02-24

【中文标题】向伪元素添加图标

【英文标题】：Adding icons to pseudo elements

【发布时间】：2017-11-29 00:02:40

【问题描述】：

我正在尝试通过 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。

【问题讨论】：

Insert Unicode character into JavaScript的可能重复

【参考方案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'（未显示）是 control character 这一事实有关。正如您在后续评论中提到的那样，您正在使用 FontAwesome 并且此类库提供了将某些代码点映射到显示图标的自定义字体（尽管它们通常使用 private areas 来避免冲突）。

【讨论】：

感谢阿尔瓦罗！这解决了这个问题。您的答案中最喜欢的部分是答案本身将实体转换为 unicode。仅供参考：它来自 FontAwesome。

@venkatraj 我最终弄明白了为什么我对U+0086 有问题。我已经更新了我的答案。

【参考方案2】：

编码雷区

更多详情请见this *** answer。

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

简而言之，我建议使用字符而不是任何编码方法。在这种情况下，您的 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>

【讨论】：

这应该解释一下：Insert Unicode character into JavaScript

我运行了sn-p代码，但是文本“Icon”之后没有显示图标，它只是空白。这是预期的行为吗？

@shaochuancs - 在哪个浏览器中看不到图标？我用的是谷歌的 Chrome，一切都很好。

@FredGandt 我在 Mac 上使用 Chrome 版本 59.0.3071.109

也在 Firefox、Safari 和 Opera 上测试过，没有运气:( 看起来更像是 Mac 问题...

【参考方案3】：

这显然是因为setAttribute 正在转义你的特殊字符......无论如何你需要使用 CSS 编码的图标而不是 HTML 实体。使用this convertor:

† → \0086

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

例如：

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

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

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

【讨论】：

感谢转换器链接。