CSS attr() - 在内部动态设置 FontAwesome 字形 before/after

Question

我正在尝试通过 CSS 属性 attr(属性 ).

我想要的是在标签上设置一个属性

<button glyph="\f005"></button>

然后像这样在 CSS 文件中使用它

button::before{
     content: attr(glyph)
}

但它看起来不起作用，它只是显示我在标签中编写的代码。有没有办法 "render" 代码或使 CSS 将其视为转义字符？

看看这个 Fiddle 作为一个简单的例子。

Answer 1

尝试将字形属性的值设置为 HTML 实体，例如 glyph=""

Answer 2

首先，你的CSS应该是button::before或button::after，而不仅仅是button。您只能在这些中使用 content。

其次，在 HTML 中，您编写的实体类似于 &XXXX;，而不是 \XXXX，您将其混淆了一点。想象一下，实体变成单字符，然后转成CSS，不是别的方式。在 HTML 中，您需要使用 HTML 个实体，在 CSS 中，使用 CSS 个实体，即使它们将以某种方式穿越两种语言。

第三，不要使用像 glyph 这样的非标准属性。它们应该以 data-.

开头

CSS attr() - Set FontAwesome glyph dynamically inside before/after