php - 在 CSS 中使用数据图标

Question

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
  font-family: 'Flat-UI-Icons';
  content: attr(data-icon);
  speak: none;

我在其中一个 Bootstrap 主题模板中看到了这段代码。 data-icon 或 attr(data-icon) 是如何工作的？我似乎无法显示我所拥有的示例的“图像/文字”，它现在是空的。我试过了

<a href="#fakelink" class="fui-flat">text here</a>

这里的文本字体似乎与示例的字体不一样，而且，示例中的 a 标签之间没有任何内容。

请指教。谢谢

Answer 1

上面的 css 会影响每个数据图标实例之前发生的事情，而不是显示的链接

它们是 css3 特性。属性选择器允许您根据某些属性将格式应用于元素。

[att^=val] – “开头为”选择器[att$=val] – “结束于”选择器[att*=val] – “包含”选择器

很好的描述here这是上面的来源和here