css - 如何在 Font Awesome 中使用数据属性？

Question

我想将一个 rel 内容转换成一个 Font Awesome CSS 图标，这样我就不必为一个简单的菜单写 20 行代码。

也许一些代码会使它更容易理解。

我尝试这样做:

a:before {content: "\(" attr(rel) ")"; font-family: 'FontAwesome';}

基本上我正在尝试转换 rel 中的值并将其转换为有效的 CSS 规则。

所以链接看起来像这样:

<a href="http://www.example.com" rel="f291">Example</a>

最终结果应该类似于:

a:before {content: "\f291")"; font-family: 'FontAwesome';}

Answer 1

尽管问题可能重复到 this post .简而言之 - 您需要使用 HTML 实体或 unicode 字符本身，以便在 CSS content 属性中使用它。

然而，将这项技术与 Font Awesome 一起使用是一个非常有趣的想法，所以我正在写这个答案，并为其添加额外的信息。

我建议使用数据属性 data-而不是 rel ，因为 rel 是为链接类型设计的。

然后 this page有一套完整的 Font Awesome unicode 表。您可以复制/粘贴 unicode 字符或图标本身。示例如下:

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

a::before {
  font-family: 'FontAwesome';
  content: attr(data-fa-icon);
}

<p><a href="#" data-fa-icon="&#xf206;"> Unicode example</a></p>
<p><a href="#" data-fa-icon=""> Icon example</a></p>