时间戳

首页 > 解决方案 > 如何在伪元素之前分配具有数据属性的图标？

html - 如何在伪元素之前分配具有数据属性的图标？

问题描述

我想将 iconfont 中的图标分配给具有 before 伪元素的 span 元素。图标的值作为数据属性动态写入 HTML。

不幸的是，在以下示例中，HTML 没有显示图标，而是“\EA46”。可能是因为反斜杠。有谁知道我该如何解决这个问题？

.testicon {
  font-family: iconFont;
}

[data-icon]:before {
  content: attr(data-icon);
}
<span class="testicon" data-icon="\EA46"></span>

标签： htmlcsscss-selectorspseudo-elementcustom-data-attribute

解决方案

我无法仅使用 data-icon 属性来解决此问题，但结合在元素中设置 CSS 变量样式，这是可行的。注意引号是必要的。

（示例使用 Fontawesome 和十六进制编码字符来表示错误，因此它可以被视为不是空白方块，因为给定的十六进制代码不是 FA 中的字符）

<!DOCTYPE html>
<html>
<head>
<title>Test icon as data attribute bug?</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.testicon {
   font-family: fontAwesome, monospace;
}

[data-icon]:before {
   content: var(--icon);
}
</style>
</head>
<body>

<span class="testicon" style="--icon: '\f188';" data-icon></span>

</body>
</html>

推荐阅读