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>

Answer 2

在css中无法做到这一点，因为没有变量。您可以使用已编译的css（如sass）。另一种方法是js。第三种方法是在服务器端的html中添加样式。

如何使用Font Awesome的数据属性？

2 个答案: